<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" href="./favicon.ico" />
    <title>视频监控</title>
    <link rel="stylesheet" href="dist/styles/iview.css">
    <link rel="stylesheet" href="./videojs/bin.css">
    <style>
        html,
        body,
        #container,
        .full {
            width: 100%;
            height: 100%;
            position: relative;
            overflow: hidden;
            visibility: visible;
        }
        
        div.ivu-modal-content div.ivu-modal-body div.ivu-tabs {
            overflow: visible;
        }
        
        .col-cls {
            text-align: center;
            line-height: 32px;
        }
        
        .row-cls {
            margin-bottom: 10px;
        }
        
        video {
            object-fit: fill;
            width: 100%;
            height: 100%;
        }
        
        #videoContent {
            overflow: hidden;
            position: absolute;
            left: 10px;
            right: 10px;
            top: 10px;
            bottom: 10px;
        }
        
        #videoContent>div {
            float: left;
            overflow: hidden;
            position: relative;
            background-image: url('./images/tv_default.jpg');
            background-size: cover;
        }
        
        #videoContent>div>div.videoElementWrap {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0px;
            top: 0;
        }
        
        #videoContent>div>video {
            width: 100%;
            height: 100%;
            object-fit: fill;
        }
        
        #videoContent>div>div:hover>div.play-btn-wrap {
            display: block;
        }
        
        #videoContent>div>div>div.play-btn-wrap {
            position: absolute;
            left: 50%;
            top: 47%;
            width: 60px;
            height: 60px;
            margin-top: -30px;
            margin-left: -30px;
            background-color: rgba(0, 0, 0, .8);
            border-radius: 50%;
            text-align: center;
            line-height: 60px;
            cursor: pointer;
            display: none;
        }
        
        div.state-event-tip {
            position: absolute;
            left: 2px;
            padding: 0px;
            bottom: 75px;
            background-color: rgba(255, 0, 0, .9);
            color: white;
            font-size: 10px;
        }
        
        .left-sider {
            position: absolute;
            left: 0;
            width: 300px;
            bottom: 0;
            top: 0;
            overflow: hidden;
        }
        
        .layui-elem-field {
            margin-bottom: 10px;
            padding: 0;
            border-width: 1px;
            border-style: solid;
        }
        
        fieldset {
            display: block;
            margin-inline-start: 2px;
            margin-inline-end: 2px;
            padding-block-start: 0.35em;
            padding-inline-start: 0.75em;
            padding-inline-end: 0.75em;
            padding-block-end: 0.625em;
            min-inline-size: min-content;
            border-width: 2px;
            border-style: groove;
            border-color: threedface;
            border-image: initial;
        }
        
        .videoContent-1>div:first-child {
            width: 100%;
            height: 100%;
        }
        
        .videoContent-4>div {
            width: 50%;
            height: 50%;
        }
        
        .videoContent-6>div:first-child {
            width: 66.66%;
            height: 66.655%;
        }
        
        .videoContent-6>div {
            width: 33.33%;
            height: 33.33333%;
        }
        
        .videoContent-8>div:first-child {
            width: 75%;
            height: 75%;
        }
        
        .videoContent-8>div {
            width: 25%;
            height: 25%;
        }
        
        .videoContent-9>div {
            width: 33.33%;
            height: 33.33%;
        }
        
        .videoContent-16>div {
            width: 25%;
            height: 25%;
        }
        
        .device-info-wrapper {
            background-color: #495060;
            height: 50px;
            padding-left: 10px;
            vertical-align: middle;
            display: flex;
            align-items: center;
            justify-content: left;
            position: absolute;
            left: 0;
            width: 300px;
            height: 50px;
            top: 0px;
            color: #ffffff;
        }
        
        .tab-wrapper {
            position: absolute;
            left: 0;
            width: 300px;
            top: 50px;
        }
        
        .mask-wrapper {
            position: absolute;
            right: 0px;
            bottom: 0px;
            top: 55px;
            left: 0px;
            z-index: 9999;
            background-color: rgb(255, 255, 255);
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .loader-05 {
            width: 50px;
            height: 50px;
            border: .2em solid transparent;
            border-top-color: currentcolor;
            border-radius: 50%;
            -webkit-animation: 1s loader-05 linear infinite;
            animation: 1s loader-05 linear infinite;
            position: relative;
        }
        
        .loader-05:before {
            content: '';
            display: block;
            width: inherit;
            height: inherit;
            position: absolute;
            top: -.2em;
            left: -.2em;
            border: .2em solid currentcolor;
            border-radius: 50%;
            opacity: .5;
        }
        
        @-webkit-keyframes loader-05 {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
        
        @keyframes loader-05 {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
        
        .text-tip {
            position: absolute;
            bottom: -25px;
            left: -20px;
            right: -20px;
            text-align: center;
        }
        
        .video-back {
            width: 80px;
            background-color: #495060;
            position: absolute;
            left: 10px;
            top: 0;
            height: 50px;
            cursor: pointer;
        }
        
        .video-dsm {
            width: 80px;
            position: absolute;
            left: 90px;
            top: 0;
            height: 50px;
            cursor: pointer;
        }
        
        .video-back .bg-img,
        .video-dsm .bg-img {
            height: 30px;
        }
        
        .video-back .bg-img>div {
            width: 30px;
            height: 30px;
            margin: 2px auto;
            background-image: url('./videojs/images/videoback.png');
            background-size: cover;
        }
        
        .video-dsm .bg-img>div {
            width: 30px;
            height: 30px;
            margin: 2px auto;
            background-image: url('./videojs/images/ai.png');
            background-size: cover;
        }
        
        .video-back:hover .bg-img>div,
        .video-dsm:hover .bg-img>div {
            background-image: url('./videojs/images/videoback_h.png');
        }
        
        .video-dsm:hover .bg-img>div,
        .video-dsm:hover .bg-img>div {
            background-image: url('./videojs/images/ai_h.png');
        }
        
        .video-back:hover .text,
        .video-dsm:hover .text {
            color: #1186DD;
        }
        
        .video-back .text,
        .video-dsm .text {
            height: 20px;
            line-height: 18px;
            text-align: center;
            color: #ffffff;
        }
        
        .video-back .bg-img,
        .video-dsm .bg-img {
            text-align: center;
        }
        
        .video-back .bg-img img,
        .video-dsm .bg-img img {
            border: 0;
            margin-top: 3px;
        }
        
        .deviceState {
            line-height: 50px;
            text-align: center;
            float: left;
            height: 50px;
            position: absolute;
            top: 0;
            color: #ffffff;
        }
        
        .blackBoxSpeak {
            width: 176px;
            height: 176px;
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            /* background: url("../../images/luyin/ic_record@2x.png") no-repeat 28px 16px/65px 104px,
            url("../../images/luyin/ic_record_ripple@2x-9.png") no-repeat 111.2px 32px/28.8px 88px; */
            background: rgba(0, 0, 0, .7);
            /* display: none; */
            border-radius: 12px;
            z-index: 8888;
        }
        
        .img-box {
            position: absolute;
            left: 10px;
            top: 10px;
            right: 10px;
            bottom: 48px;
            display: flex;
            flex-direction: row;
        }
        
        .img-box>div {
            width: 50%;
            padding: 10px;
        }
        
        .img-box>div:last-child {
            padding: 10px 20px;
            box-sizing: border-box;
        }
        
        .blackBoxSpeakConent {
            font: 14.4px '微软雅黑 Light';
            position: absolute;
            left: 0;
            right: 0;
            bottom: 12px;
            display: block;
            text-align: center;
            width: 90%;
            padding: 8px 0;
            margin: auto;
            color: #ffffff;
            font-weight: 200;
            border-radius: 4px;
        }
        
        .audioPlayerTip {
            height: 30px;
            line-height: 30px;
            background-color: rgba(0, 0, 0, .7);
            color: #ffffff;
            margin-top: 10px;
        }
        
        .ivu-row .ivu-input {
            color: #000;
        }
    </style>
    <script src="./js/flv.min.js"></script>

</head>

<body>

    <div class="mask-wrapper" id="mask-wrapper">
        <div class="box" style="position:relative;">
            <div class="loader-05"></div>
            <div class="text-tip">正在载入播放器</div>
        </div>
    </div>

    <div id="container">
        <div class="blackBoxSpeak" v-if="isLuyin">
            <div class='img-box'>
                <div>
                    <img src="./images/luyin/ic_record@2x.png" alt="" style='width:100%;height:100%'>
                </div>
                <div>
                    <img :src='imgSrc' style='width:100%;height:100%'>
                </div>
            </div>
            <div class="blackBoxSpeakConent">正在录音，请说话</div>
        </div>
        <Spin fix style="z-index:9999;" v-show="Spin"></Spin>
        <div class="left-sider" style="background-color:#ffffff;">
            <div class="full" style="position: relative;">
                <div class="device-info-wrapper" v-text="devInfo">

                </div>
                <div class="tab-wrapper">
                    <Tabs value="" :animated="false">
                        <Tab-Pane label="云台">
                            <div id="tab_state_1" class="tab_state_pane">
                                <div class="state_1_yt" style="margin-left:15px">
                                    <div class="fl icon_yt_box">
                                        <a class="icon_yt_0" title=""></a>
                                        <a class="icon_yt_1" title=""></a>
                                        <a class="icon_yt_2" title=""></a>
                                        <a class="icon_yt_3" title=""></a>
                                        <a class="icon_yt_4" title=""></a>
                                        <a class="icon_yt_5" title=""></a>
                                        <a class="icon_yt_6" title=""></a>
                                        <a class="icon_yt_7" title=""></a>
                                        <a class="icon_yt_8" title=""></a>
                                        <div id="yt_handle" class="yt" style="margin:3px;">
                                            <Slider></Slider>
                                        </div>
                                    </div>
                                    <div class="fr yt_state2">
                                        <span>
                                                <a class="icon_f0_0" title=""></a>
                                                <a class="icon_f0_1" title=""></a>
                                            </span>
                                        <span>
                                                <a class="icon_y0_0" title=""></a>
                                                <a class="icon_y0_1" title=""></a>
                                            </span>
                                        <span>
                                                <a class="icon_k0_0" title=""></a>
                                                <a class="icon_k0_1" title=""></a>
                                            </span>
                                        <span>
                                                <a class="icon_light0_0" title=""></a>
                                                <a class="icon_biao0_1" title=""></a>
                                            </span>
                                    </div>
                                    <div class="spacer"></div>
                                </div>
                                <div class="yt_footer">
                                    <Row>
                                        <i-Col span="6" style="padding: 0 5px;">
                                            <Input-Number :max="1000" :min="1" style="width:60px;"></Input-Number>
                                        </i-Col>
                                        <i-Col span="6" style="padding: 0 5px;">
                                            <i-button style="width:100%;">调用</i-button>
                                        </i-Col>
                                        <i-Col span="6" style="padding: 0 5px;">
                                            <i-button style="width:100%;">设置</i-button>
                                        </i-Col>
                                        <i-Col span="6" style="padding: 0 5px;">
                                            <i-button style="width:100%;">删除</i-button>
                                        </i-Col>
                                    </Row>
                                </div>
                            </div>
                        </Tab-Pane>
                        <Tab-Pane label="色彩">
                            <Row class="state_color">
                                <i-Col span="6" style="line-height:35px;">
                                    <i class="state_co_0" title="亮度"></i>
                                </i-Col>
                                <i-Col span="12">
                                    <Slider v-model="brightness" :min="0" :max="255"></Slider>
                                </i-Col>
                                <i-Col span="6" class="state_co_value" style="line-height:35px;height: 35px;">
                                    <input v-model="brightness" name="" type="text">
                                </i-Col>
                            </Row>
                            <Row class="state_color">
                                <i-Col span="6" style="line-height:35px;">
                                    <i class="state_co_1" title="对比度"></i>
                                </i-Col>
                                <i-Col span="12">
                                    <Slider v-model="constract" :min="-127" :max="127"></Slider>
                                </i-Col>
                                <i-Col span="6" class="state_co_value" style="line-height:35px;height: 35px;">
                                    <input v-model="constract" name="" type="text">
                                </i-Col>
                            </Row>
                            <Row class="state_color">
                                <i-Col span="6" style="line-height:35px;">
                                    <i class="state_co_2" title="色度"></i>
                                </i-Col>
                                <i-Col span="12">
                                    <Slider v-model="hue" :min="-127" :max="127"></Slider>
                                </i-Col>
                                <i-Col span="6" class="state_co_value" style="line-height:35px;height: 35px;">
                                    <input v-model="hue" name="" type="text">
                                </i-Col>
                            </Row>
                            <Row class="state_color">
                                <i-Col span="6" style="line-height:35px;">
                                    <i class="state_co_3" title="饱和度"></i>
                                </i-Col>
                                <i-Col span="12">
                                    <Slider v-model="saturate" :min="0" :max="255"></Slider>
                                </i-Col>
                                <i-Col span="6" class="state_co_value" style="line-height:35px;height: 35px;">
                                    <input v-model="saturate" name="" type="text">
                                </i-Col>
                            </Row>
                            <Row class="state_color">
                                <i-Col span="6" style="line-height:35px;">
                                    <i class="state_co_4" title="曝光"></i>
                                </i-Col>
                                <i-Col span="12">
                                    <Slider v-model="exposure" :min="0" :max="255"></Slider>
                                </i-Col>
                                <i-Col span="6" class="state_co_value" style="line-height:35px;height: 35px;">
                                    <input v-model="exposure" name="" type="text">
                                </i-Col>
                            </Row>
                            <div class="yt_footer">
                                <i-button style="width:120px;" @click="defaultQualityParams">默认</i-button>
                            </div>
                        </Tab-Pane>
                        <Tab-Pane label="语音">
                            <div class="listing_choice">
                                <Radio-Group v-model="listingChoice">
                                    <Radio label="duijiang"><span>对讲</span></Radio>
                                    <Radio label="jianting"><span>监听</span></Radio>
                                </Radio-Group>
                            </div>
                            <div class="listing_box" v-if="listingChoice == 'duijiang'">
                                <i class="icon_dj"></i>
                                <div class="audioPlayerTip">{{audioPlayerTip}}</div>
                                <div class="yt_footer">
                                    <div>
                                        <i-button style="width:120px;" @click="openDuijiang" :loading="loading">{{isOpenJianting?'关闭':'开启'}}</i-button>
                                    </div>
                                    <div @mousedown="onMousedown" style="margin-top:10px;">
                                        <i-button style="width:120px;">按住通话</i-button>
                                    </div>
                                </div>
                            </div>
                            <div class="listing_box" v-else>
                                <i class="icon_jt"></i>
                                <div class="audioPlayerTip">{{audioPlayerTip}}</div>
                                <div class="yt_footer">
                                    <div>
                                        <i-button style="width:120px;" @click="openDuijiang" :loading="loading">{{isOpenJianting?'关闭':'开启'}}</i-button>
                                    </div>
                                </div>
                            </div>
                        </Tab-Pane>
                    </Tabs>
                    <div style="visibility: hidden;">
                        <div id="audio-wrap">
                            <video id="audio-player" style="display: none;"></video>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div style="position: absolute; left: 300px;bottom: 0;right: 0;top: 0;">
            <div style="height:50px;line-height:50px;padding: 0 10px; position: absolute;left: 0;right: 0;top: 0;overflow: hidden;background-color: #495060;">
                <div class="video-back" @click='videoBack'>
                    <div class="bg-img">
                        <!-- <img src="./videojs/images/videoback.png" width="30" height="30"> -->
                        <div></div>
                    </div>
                    <div class="text">录像回放</div>
                </div>
                <div :class="activeSafety?'video-dsm':''" @click='videoDsm' v-if="activeSafety">
                    <div class="bg-img">
                        <div></div>
                    </div>
                    <div class="text" v-text="activeSafetyStr"></div>
                </div>
                <div class="deviceState" :style="{left:activeSafety? '180px':'100px'}" v-if="deviceState">
                    <span v-text="deviceState"></span>
                </div>
                <div style="height: 100%;text-align: right;" class="tv_box">
                    <span title="显示一个通道"><i class="icon icon_num1" @click="openAndCloseVideoWindows(1)"></i></span>
                    <span title="显示四个通道"><i class="icon icon_num2" @click="openAndCloseVideoWindows(4)"></i></span>
                    <span title="显示六个通道"><i class="icon icon_num3" @click="openAndCloseVideoWindows(6)"></i></span>
                    <span title="显示八个通道"><i class="icon icon_num4" @click="openAndCloseVideoWindows(8)"></i></span>
                    <span title="显示九个通道"><i class="icon icon_num5" @click="openAndCloseVideoWindows(9)"></i></span>
                    <span title="显示十六个通道"><i class="icon icon_num6" @click="openAndCloseVideoWindows(16)"></i></span>
                    <span id="box_viewSize" @click="handleFullScreen" title="全屏">
                                    <i class="icon icon_view"></i>
                                    <!-- <ul class="tc_box">
                                        <li id="liViewFull" @click="handleScreenSize(1)"><a id="viewFull">
                                            <i v-show="viewSize == 1" class="icon_select"></i>满画面显示</a></li>
                                        <li id="liView4X3" @click="handleScreenSize(2)"><a id="view4X3">
                                            <i class="icon_select" v-show="viewSize == 2"></i>4:3显示</a></li>
                                        <li id="liView16X9" @click="handleScreenSize(3)"><a id="view16X9">
                                            <i class="icon_select" v-show="viewSize == 3"></i>16:9显示</a></li>
                                    </ul> -->
                                </span>
                    <span @click="handlePlayAllVideos" title="播放所有视频">
                                    <i class="icon icon_play_all"></i>
                                </span>
                    <span id="box_stop" @click="handleStopAllVideos" title="停止所有视频">
                                    <i class="icon icon_close_show"></i>
                                    <!-- <ul class="tc_box">
                                        <li @click="handleStopAllVideos"><a id="stopAll" ><i class="icon icon_gou"></i>停止所有视频</a></li>
                                    </ul> -->
                                </span>
                    <span @click="setupModal=true"><i class="icon icon_num9"  title="视频播放设置"></i></span>

                </div>
                <Modal v-model="setupModal" width="800">
                    <p slot="header" style="color:#f60;text-align:center">
                        <Icon type="ios-search-outline"></Icon>
                        <span v-text="modalHader"></span>
                    </p>
                    <Tabs value="" :animated="false">
                        <Tab-Pane label="视频播放参数" name="videoPlay">
                            <Row style="height:32px;margin: 10px 0;">
                                <i-Col span="5" style="height: 100%;line-height:32px;text-align: right;">
                                    传输模式
                                </i-Col>
                                <i-Col span="1" style="height: 100%;line-height:32px;text-align: center;">:</i-Col>
                                <i-Col span="12" style="height: 100%;line-height:32px;padding-left: 3px;">
                                    <i-select v-model="videotranstype" style="width:300px">
                                        <i-option value="0">TCP</i-option>
                                        <i-option value="1">UDP</i-option>
                                    </i-select>
                                </i-Col>
                            </Row>
                            <Row style="height:32px;margin: 10px 0;">
                                <i-Col span="5" style="height: 100%;line-height:32px;text-align: right;">
                                    实时性
                                </i-Col>
                                <i-Col span="1" style="height: 100%;line-height:32px;text-align: center;">:</i-Col>
                                <i-Col span="12" style="height: 100%;line-height:32px;padding-left: 3px;">
                                    <i-select placement="top" v-model="videostreamtype" style="width:300px">
                                        <i-option value="0">主码流(清晰)</i-option>
                                        <i-option value="1">子码流(流畅)</i-option>
                                    </i-select>
                                </i-Col>
                            </Row>
                            <Row style="height:32px;margin: 10px 0;">
                                <i-Col span="5" style="height: 100%;line-height:32px;text-align: right;">
                                    对讲通道
                                </i-Col>
                                <i-Col span="1" style="height: 100%;line-height:32px;text-align: center;">:</i-Col>
                                <i-Col span="12" style="height: 100%;line-height:32px;padding-left: 3px;">
                                    <i-input v-model="audiochannel" style="width:300px"></i-input>
                                </i-Col>
                            </Row>
                            <Row style="height:32px;margin: 10px 0;">
                                <i-Col span="5" style="height: 100%;line-height:32px;text-align: right;">
                                    回放音频格式
                                </i-Col>
                                <i-Col span="1" style="height: 100%;line-height:32px;text-align: center;">:</i-Col>
                                <i-Col span="12" style="height: 100%;line-height:32px;padding-left: 3px;">
                                    <i-select placement="top" v-model="historyaudiocodec" style="width:300px">
                                        <i-option value="0">0-reserve</i-option>
                                        <i-option value="1">1-Audio_G721</i-option>
                                        <i-option value="2">2-Audio_G722</i-option>
                                        <i-option value="3">3-Audio_G723</i-option>
                                        <i-option value="4">4-Audio_G728</i-option>
                                        <i-option value="5">5-Audio_G729</i-option>
                                        <i-option value="6">6-Audio_G711A</i-option>
                                        <i-option value="7">7-Audio_G711U</i-option>
                                        <i-option value="8">8-Audio_G726</i-option>
                                        <i-option value="9">9-Audio_G729A</i-option>
                                        <i-option value="10">10-Audio_DVI4_3</i-option>
                                        <i-option value="11">11-Audio_DVI4_4</i-option>
                                        <i-option value="12">12-Audio_DVI4_8K</i-option>
                                        <i-option value="13">13-Audio_DVI4_16K</i-option>
                                        <i-option value="14">14-Audio_LPC</i-option>
                                        <i-option value="15">15-Audio_S16BE_STEREO</i-option>
                                        <i-option value="16">16-Audio_S16BE_MONO</i-option>
                                        <i-option value="17">17-Audio_MPEGAUDIO</i-option>
                                        <i-option value="18">18-Audio_LPCM</i-option>
                                        <i-option value="19">19-Audio_AAC</i-option>
                                        <i-option value="20">20-Audio_WMA9STD</i-option>
                                        <i-option value="21">21-Audio_HEAAC</i-option>
                                        <i-option value="22">22-Audio_PCM_VOICE</i-option>
                                        <i-option value="23">23-Audio_PCM_AUDIO</i-option>
                                        <i-option value="24">24-Audio_AACLC</i-option>
                                        <i-option value="25">25-Audio_MP3</i-option>
                                        <i-option value="26">26-Audio_ADPCMA</i-option>
                                        <i-option value="27">27-Audio_MP4AUDIO</i-option>
                                        <i-option value="28">28-Audio_AMR</i-option>
                                        <i-option value="91">91-transport</i-option>
                                        <i-option value="98">98-Video_H264</i-option>
                                        <i-option value="99">99-Video_H265</i-option>
                                        <i-option value="100">100-Video_AVS</i-option>
                                        <i-option value="101">101-Video_SVAC</i-option>
                                        <i-option value="111">111-Audio_G726_40K</i-option>
                                        <i-option value="112">112-Audio_G726Be_32K</i-option>
                                        <i-option value="113">113-Audio_G726Be_40K</i-option>
                                    </i-select>
                                </i-Col>
                            </Row>
                            <Row style="height:32px;margin: 10px 0;">
                                <i-Col span="5" style="height: 100%;line-height:32px;text-align: right;">
                                    指定上传文件名
                                </i-Col>
                                <i-Col span="1" style="height: 100%;line-height:32px;text-align: center;">:</i-Col>
                                <i-Col span="12" style="height: 100%;line-height:32px;padding-left: 3px;">
                                    <Checkbox v-model="needuploadfilename"></Checkbox>
                                </i-Col>
                            </Row>
                            <Row style="height:32px;margin: 10px 0;">
                                <i-Col span="5" style="height: 100%;line-height:32px;text-align: right;">
                                    视频时间戳
                                </i-Col>
                                <i-Col span="1" style="height: 100%;line-height:32px;text-align: center;">:</i-Col>
                                <i-Col span="12" style="height: 100%;line-height:32px;padding-left: 3px;">
                                    <i-select placement="top" v-model="videotimestamptype" style="width:300px">
                                        <i-option value="0">设备计算</i-option>
                                        <i-option value="1">服务器计算</i-option>
                                    </i-select>
                                </i-Col>
                            </Row>
                            <Row style="height:32px;margin: 10px 0;">
                                <i-Col span="5" style="height: 100%;line-height:32px;text-align: right;">
                                    视频播放个数
                                </i-Col>
                                <i-Col span="1" style="height: 100%;line-height:32px;text-align: center;">:</i-Col>
                                <i-Col span="12" style="height: 100%;line-height:32px;padding-left: 3px;">
                                    <Input-Number :max="4" :min="1" v-model="videochannelcount"></Input-Number>
                                </i-Col>
                            </Row>
                            <Row style="height:32px;margin: 10px 0;">
                                <i-Col span="5" style="height: 100%;line-height:32px;text-align: right;">
                                    通道1
                                </i-Col>
                                <i-Col span="1" style="height: 100%;line-height:32px;text-align: center;">:</i-Col>
                                <i-Col span="10" style="height: 100%;line-height:32px;padding-left: 3px;">
                                    <i-select placement="top" v-model="physicalchannel1" style="width:300px">
                                        <i-option value="0">音视频</i-option>
                                        <i-option value="1">音频 </i-option>
                                        <i-option value="2">视频</i-option>
                                    </i-select>
                                </i-Col>
                            </Row>
                            <Row style="height:32px;margin: 10px 0;" v-show="videochannelcount > 1">
                                <i-Col span="5" style="height: 100%;line-height:32px;text-align: right;">
                                    通道2
                                </i-Col>
                                <i-Col span="1" style="height: 100%;line-height:32px;text-align: center;">:</i-Col>
                                <i-Col span="10" style="height: 100%;line-height:32px;padding-left: 3px;">
                                    <i-select placement="top" v-model="physicalchannel2" style="width:300px">
                                        <i-option value="0">音视频</i-option>
                                        <i-option value="1">音频 </i-option>
                                        <i-option value="2">视频</i-option>
                                    </i-select>
                                </i-Col>
                            </Row>
                            <Row style="height:32px;margin: 10px 0;" v-show="videochannelcount > 2">
                                <i-Col span="5" style="height: 100%;line-height:32px;text-align: right;">
                                    通道3
                                </i-Col>
                                <i-Col span="1" style="height: 100%;line-height:32px;text-align: center;">:</i-Col>
                                <i-Col span="10" style="height: 100%;line-height:32px;padding-left: 3px;">
                                    <i-select placement="top" v-model="physicalchannel3" style="width:300px">
                                        <i-option value="0">音视频</i-option>
                                        <i-option value="1">音频 </i-option>
                                        <i-option value="2">视频</i-option>
                                    </i-select>
                                </i-Col>
                            </Row>
                            <Row style="height:32px;margin: 10px 0;" v-show="videochannelcount > 3">
                                <i-Col span="5" style="height: 100%;line-height:32px;text-align: right;">
                                    通道4
                                </i-Col>
                                <i-Col span="1" style="height: 100%;line-height:32px;text-align: center;">:</i-Col>
                                <i-Col span="10" style="height: 100%;line-height:32px;padding-left: 3px;">
                                    <i-select placement="top" v-model="physicalchannel4" style="width:300px">
                                        <i-option value="0">音视频</i-option>
                                        <i-option value="1">音频 </i-option>
                                        <i-option value="2">视频</i-option>
                                    </i-select>
                                </i-Col>
                            </Row>
                            <Row style="height:32px;margin: 10px 0;">
                                <i-Col span="18" style="height: 100%;line-height:32px;text-align: center;">
                                    <i-button type='primary' @click='handleSetPlayParamter' :disabled="userType > 2">设置播放视频参数</i-button>
                                    <i-button type="info" @click="queryVideoPlayParameters" style="width:130px;">查询</i-button>
                                </i-Col>
                            </Row>
                        </Tab-Pane>
                        <Tab-Pane label="音视频参数" name="videoSetup">
                            <Row style="height:32px;margin: 10px 0;">
                                <i-Col span="24" style="height: 100%;line-height:32px;text-align: right;">
                                    <i-button type="success" @click="defaultClientParameters">默认参数</i-button>
                                    <i-button type="info" @click="queryClientParameters">查询</i-button>
                                    <i-button type="primary" @click="setClientParameters" :disabled="userType > 2">发送</i-button>
                                </i-Col>
                            </Row>
                            <Row style="height:32px;margin: 10px 0;">
                                <i-Col span="4" style="height: 100%;line-height:32px;text-align: right;">
                                    实时流编码模式 :
                                </i-Col>
                                <i-Col span="1" style="height: 100%;line-height:32px;text-align: center;">
                                    :
                                </i-Col>
                                <i-Col span="7" style="height: 100%;line-height:32px;">
                                    <i-select v-model="realtimebitratemode">
                                        <i-option value="0">CBR(固定码率)</i-option>
                                        <i-option value="1">VBR(可变码率)</i-option>
                                        <i-option value="2">ABR(平均码率)</i-option>
                                    </i-select>
                                </i-Col>
                                <i-Col span="4" style="height: 100%;line-height:32px;text-align: right;">
                                    存储流编码模式
                                </i-Col>
                                <i-Col span="1" style="height: 100%;line-height:32px;text-align: center;">
                                    :
                                </i-Col>
                                <i-Col span="7" style="height: 100%;line-height:32px;">
                                    <i-select v-model="storebitratemode">
                                        <i-option value="0">CBR(固定码率)</i-option>
                                        <i-option value="1">VBR(可变码率)</i-option>
                                        <i-option value="2">ABR(平均码率)</i-option>
                                    </i-select>
                                </i-Col>
                            </Row>
                            <Row style="height:32px;margin: 10px 0;">
                                <i-Col span="4" style="height: 100%;line-height:32px;text-align: right;">
                                    实时流分辨率
                                </i-Col>
                                <i-Col span="1" style="height: 100%;line-height:32px;text-align: center;">
                                    :
                                </i-Col>
                                <i-Col span="7" style="height: 100%;line-height:32px;">
                                    <i-select v-model="realtimeresolution">
                                        <i-option value="0">QCIF</i-option>
                                        <i-option value="1">CIF</i-option>
                                        <i-option value="2">WCIF</i-option>
                                        <i-option value="3">D1</i-option>
                                        <i-option value="4">WD1</i-option>
                                        <i-option value="5">720p</i-option>
                                        <i-option value="6">1080p</i-option>
                                    </i-select>
                                </i-Col>
                                <i-Col span="4" style="height: 100%;line-height:32px;text-align: right;">
                                    存储流分辨率
                                </i-Col>
                                <i-Col span="1" style="height: 100%;line-height:32px;text-align: center;">
                                    :
                                </i-Col>
                                <i-Col span="7" style="height: 100%;line-height:32px;">
                                    <i-select v-model="storeresolution">
                                        <i-option value="0">QCIF</i-option>
                                        <i-option value="1">CIF</i-option>
                                        <i-option value="2">WCIF</i-option>
                                        <i-option value="3">D1</i-option>
                                        <i-option value="4">WD1</i-option>
                                        <i-option value="5">720p</i-option>
                                        <i-option value="6">1080p</i-option>
                                    </i-select>
                                </i-Col>
                            </Row>
                            <Row style="height:32px;margin: 10px 0;">
                                <i-Col span="4" style="height: 100%;line-height:32px;text-align: right;">
                                    实时流关键帧间隔 :
                                </i-Col>
                                <i-Col span="1" style="height: 100%;line-height:32px;text-align: center;">
                                    :
                                </i-Col>
                                <i-Col span="7" style="height: 100%;line-height:32px;">
                                    <Input-Number :max="1000" :min="1" v-model="realtimekeyframeinterval"></Input-Number>
                                    范围1~1000
                                </i-Col>
                                <i-Col span="4" style="height: 100%;line-height:32px;text-align: right;">
                                    存储流关键帧间隔
                                </i-Col>
                                <i-Col span="1" style="height: 100%;line-height:32px;text-align: center;">
                                    :
                                </i-Col>
                                <i-Col span="7" style="height: 100%;line-height:32px;">
                                    <Input-Number :max="1000" :min="1" v-model="storekeyframeinterval"></Input-Number>
                                    范围1~1000
                                </i-Col>
                            </Row>
                            <Row style="height:32px;margin: 10px 0;">
                                <i-Col span="4" style="height: 100%;line-height:32px;text-align: right;">
                                    实时流目标帧率
                                </i-Col>
                                <i-Col span="1" style="height: 100%;line-height:32px;text-align: center;">
                                    :
                                </i-Col>
                                <i-Col span="7" style="height: 100%;line-height:32px;">
                                    <Input-Number :max="120" :min="1" v-model="realtimeframerate"></Input-Number>
                                    范围1~120 帧/秒
                                </i-Col>
                                <i-Col span="4" style="height: 100%;line-height:32px;text-align: right;">
                                    存储流目标帧率
                                </i-Col>
                                <i-Col span="1" style="height: 100%;line-height:32px;text-align: center;">
                                    :
                                </i-Col>
                                <i-Col span="7" style="height: 100%;line-height:32px;">
                                    <Input-Number :max="120" :min="1" v-model="storeframerate"></Input-Number>
                                    范围1~120 帧/秒
                                </i-Col>
                            </Row>
                            <Row style="height:32px;margin: 10px 0;">
                                <i-Col span="4" style="height: 100%;line-height:32px;text-align: right;">
                                    实时流目标码率
                                </i-Col>
                                <i-Col span="1" style="height: 100%;line-height:32px;text-align: center;">
                                    :
                                </i-Col>
                                <i-Col span="7" style="height: 100%;line-height:32px;">
                                    <Input-Number :max="5000" :min="1" v-model="realtimeframebitrate"></Input-Number>
                                    kbps
                                </i-Col>
                                <i-Col span="4" style="height: 100%;line-height:32px;text-align: right;">
                                    存储流目标码率
                                </i-Col>
                                <i-Col span="1" style="height: 100%;line-height:32px;text-align: center;">
                                    :
                                </i-Col>
                                <i-Col span="7" style="height: 100%;line-height:32px;">
                                    <Input-Number :max="5000" :min="1" v-model="storeframebitrate"></Input-Number>
                                    kbps
                                </i-Col>
                            </Row>
                            <hr/>
                            <fieldset class="layui-elem-field fieldset" style="margin-top:5px;padding-left: 10px;">
                                <legend style="margin-left:20px;">OSD 字幕叠加设置</legend>
                                <Row style="height:32px;margin: 10px 0;">
                                    <i-Col span="24" style="height: 100%;line-height:32px;">
                                        <checkbox-group v-model="videoCheckboxGroup">
                                            <Checkbox label="dateandtime">
                                                <span>日期和时间</span>
                                            </Checkbox>
                                            <Checkbox label="carnum">
                                                <span>车牌号码</span>
                                            </Checkbox>
                                            <Checkbox label="channel">
                                                <span>逻辑通道号</span>
                                            </Checkbox>
                                            <Checkbox label="latlon">
                                                <span>经纬度</span>
                                            </Checkbox>
                                            <Checkbox label="recorderspeed">
                                                <span>行驶记录速度</span>
                                            </Checkbox>
                                            <Checkbox label="gpsspeed">
                                                <span>卫星定位速度</span>
                                            </Checkbox>
                                            <Checkbox label="drivingtime">
                                                <span>连续驾驶时间</span>
                                            </Checkbox>
                                        </checkbox-group>
                                    </i-Col>
                                </Row>
                            </fieldset>
                            <Row style="height:32px;margin: 10px 0;">
                                <i-Col span="4" style="height: 100%;line-height:32px;text-align: right;">
                                    是否启用音频输出
                                </i-Col>
                                <i-Col span="1" style="height: 100%;line-height:32px;text-align: center;">
                                    :
                                </i-Col>
                                <i-Col span="7" style="height: 100%;line-height:32px;">
                                    <i-select placement="top" v-model="usingaudio">
                                        <i-option value="1">启用</i-option>
                                        <i-option value="0">不启用</i-option>
                                    </i-select>
                                </i-Col>
                            </Row>
                        </Tab-Pane>
                        <Tab-Pane label="单独通道视频参数" name="aloneVideoSetup">
                            <i-button type="info" @click="querySingleAudioVideoParameters" style="width:180px;margin-bottom:10px;">查询</i-button>
                            <Tabs value="" :animated="false" type="card">
                                <Tab-Pane :label="item.channelnum" v-for="(item,index) in channelsData" :key="index">
                                    <Row style="height:32px;margin: 10px 0;">
                                        <i-Col span="5" style="height: 100%;line-height:32px;text-align: center;">
                                            实时流编码模式 :
                                        </i-Col>
                                        <i-Col span="7" style="height: 100%;line-height:32px;">
                                            <i-select v-model="item.realtimebitratemode">
                                                <i-option value="0">CBR(固定码率)</i-option>
                                                <i-option value="1">VBR(可变码率)</i-option>
                                                <i-option value="2">ABR(平均码率)</i-option>
                                            </i-select>
                                        </i-Col>
                                        <i-Col span="5" style="height: 100%;line-height:32px;text-align: center;">
                                            存储流编码模式 :
                                        </i-Col>
                                        <i-Col span="7" style="height: 100%;line-height:32px;">
                                            <i-select v-model="item.storebitratemode">
                                                <i-option value="0">CBR(固定码率)</i-option>
                                                <i-option value="1">VBR(可变码率)</i-option>
                                                <i-option value="2">ABR(平均码率)</i-option>
                                            </i-select>
                                        </i-Col>
                                    </Row>
                                    <Row style="height:32px;margin: 10px 0;">
                                        <i-Col span="5" style="height: 100%;line-height:32px;text-align: center;">
                                            实时流分辨率 :
                                        </i-Col>
                                        <i-Col span="7" style="height: 100%;line-height:32px;">
                                            <i-select v-model="item.realtimeresolution">
                                                <i-option value="0">QCIF</i-option>
                                                <i-option value="1">CIF</i-option>
                                                <i-option value="2">WCIF</i-option>
                                                <i-option value="3">D1</i-option>
                                                <i-option value="4">WD1</i-option>
                                                <i-option value="5">720p</i-option>
                                                <i-option value="6">1080p</i-option>
                                            </i-select>
                                        </i-Col>
                                        <i-Col span="5" style="height: 100%;line-height:32px;text-align: center;">
                                            存储流分辨率 :
                                        </i-Col>
                                        <i-Col span="7" style="height: 100%;line-height:32px;">
                                            <i-select v-model="item.storeresolution">
                                                <i-option value="0">QCIF</i-option>
                                                <i-option value="1">CIF</i-option>
                                                <i-option value="2">WCIF</i-option>
                                                <i-option value="3">D1</i-option>
                                                <i-option value="4">WD1</i-option>
                                                <i-option value="5">720p</i-option>
                                                <i-option value="6">1080p</i-option>
                                            </i-select>
                                        </i-Col>
                                    </Row>
                                    <Row style="height:32px;margin: 10px 0;">
                                        <i-Col span="5" style="height: 100%;line-height:32px;text-align: center;">
                                            实时流关键帧间隔 :
                                        </i-Col>
                                        <i-Col span="7" style="height: 100%;line-height:32px;">
                                            <Input-Number :max="1000" :min="1" v-model="item.realtimekeyframeinterval"></Input-Number>
                                            范围1~1000
                                        </i-Col>
                                        <i-Col span="5" style="height: 100%;line-height:32px;text-align: center;">
                                            存储流关键帧间隔 :
                                        </i-Col>
                                        <i-Col span="7" style="height: 100%;line-height:32px;">
                                            <Input-Number :max="1000" :min="1" v-model="item.storekeyframeinterval"></Input-Number>
                                            范围1~1000
                                        </i-Col>
                                    </Row>
                                    <Row style="height:32px;margin: 10px 0;">
                                        <i-Col span="5" style="height: 100%;line-height:32px;text-align: center;">
                                            实时流目标帧率 :
                                        </i-Col>
                                        <i-Col span="7" style="height: 100%;line-height:32px;">
                                            <Input-Number :max="120" :min="1" v-model="item.realtimeframerate"></Input-Number>
                                            范围1~120 帧/秒
                                        </i-Col>
                                        <i-Col span="5" style="height: 100%;line-height:32px;text-align: center;">
                                            存储流目标帧率 :
                                        </i-Col>
                                        <i-Col span="7" style="height: 100%;line-height:32px;">
                                            <Input-Number :max="120" :min="1" v-model="item.storeframerate"></Input-Number>
                                            范围1~120 帧/秒
                                        </i-Col>
                                    </Row>
                                    <Row style="height:32px;margin: 10px 0;">
                                        <i-Col span="5" style="height: 100%;line-height:32px;text-align: center;">
                                            实时流目标码率 :
                                        </i-Col>
                                        <i-Col span="7" style="height: 100%;line-height:32px;">
                                            <Input-Number :max="2000" :min="1" v-model="item.realtimeframebitrate"></Input-Number>
                                            kbps
                                        </i-Col>
                                        <i-Col span="5" style="height: 100%;line-height:32px;text-align: center;">
                                            存储流目标码率 :
                                        </i-Col>
                                        <i-Col span="7" style="height: 100%;line-height:32px;">
                                            <Input-Number :max="2000" :min="1" v-model="item.storeframebitrate"></Input-Number>
                                            kbps
                                        </i-Col>
                                    </Row>
                                    <hr/>
                                    <fieldset class="layui-elem-field fieldset" style="margin-top:5px;padding-left: 10px;">
                                        <legend style="margin-left:20px;">OSD 字幕叠加设置</legend>
                                        <Row style="height:32px;margin: 10px 0;">
                                            <i-Col span="24" style="height: 100%;line-height:32px;">
                                                <checkbox-group v-model="item.videoCheckboxGroup">
                                                    <Checkbox label="dateandtime">
                                                        <span>日期和时间</span>
                                                    </Checkbox>
                                                    <Checkbox label="carnum">
                                                        <span>车牌号码</span>
                                                    </Checkbox>
                                                    <Checkbox label="channel">
                                                        <span>逻辑通道号</span>
                                                    </Checkbox>
                                                    <Checkbox label="latlon">
                                                        <span>经纬度</span>
                                                    </Checkbox>
                                                    <Checkbox label="recorderspeed">
                                                        <span>行驶记录速度</span>
                                                    </Checkbox>
                                                    <Checkbox label="gpsspeed">
                                                        <span>卫星定位速度</span>
                                                    </Checkbox>
                                                    <Checkbox label="drivingtime">
                                                        <span>连续驾驶时间</span>
                                                    </Checkbox>
                                                </checkbox-group>
                                            </i-Col>
                                        </Row>
                                    </fieldset>
                                    <Row style="height:32px;margin: 10px 0;">
                                        <i-Col span="24" style="height:100%;line-height:32px;text-align:center;">
                                            <i-button style="width:200px;" type="primary" @click="setSingleAudioVideoParameters(index)">发送</i-button>
                                        </i-Col>
                                    </Row>
                                </Tab-Pane>
                            </Tabs>
                        </Tab-Pane>
                        <Tab-Pane label="音视频终端属性" name="videoProperty">
                            <Row style="height:32px;margin: 10px 0;">
                                <i-Col span="7" offset="7" style="height: 100%;line-height:32px;">
                                    <i-button @click="queryVideoProperty" style="width:120px;" type="primary">查询</i-button>
                                </i-Col>
                            </Row>
                            <Row style="height:32px;">
                                <i-Col span="8" style="height: 100%;text-align:right;line-height:32px;">音频编码方式 : &nbsp;</i-Col>
                                <i-Col span="16" style="height: 100%;line-height:32px;">
                                    {{videoProperty.audiocodec}}
                                </i-Col>
                            </Row>
                            <Row style="height:32px;">
                                <i-Col span="8" style="height: 100%;text-align:right;line-height:32px;">音频编码方式字符 : &nbsp;</i-Col>
                                <i-Col span="16" style="height: 100%;line-height:32px;">
                                    {{videoProperty.audiocodecstr}}
                                </i-Col>
                            </Row>
                            <Row style="height:32px;">
                                <i-Col span="8" style="height: 100%;text-align:right;line-height:32px;">音频声道数 : &nbsp;</i-Col>
                                <i-Col span="16" style="height: 100%;line-height:32px;">
                                    {{videoProperty.audiochannelcount}}
                                </i-Col>
                            </Row>
                            <Row style="height:32px;">
                                <i-Col span="8" style="height: 100%;text-align:right;line-height:32px;">音频采样率 : &nbsp;</i-Col>
                                <i-Col span="16" style="height: 100%;line-height:32px;">
                                    {{videoProperty.audiosamplerate}}
                                </i-Col>
                            </Row>
                            <Row style="height:32px;">
                                <i-Col span="8" style="height: 100%;text-align:right;line-height:32px;">音频采样位数 : &nbsp;</i-Col>
                                <i-Col span="16" style="height: 100%;line-height:32px;">
                                    {{videoProperty.audiosamplebits}}
                                </i-Col>
                            </Row>
                            <Row style="height:32px;">
                                <i-Col span="8" style="height: 100%;text-align:right;line-height:32px;">音频帧长度 : &nbsp;</i-Col>
                                <i-Col span="16" style="height: 100%;line-height:32px;">
                                    {{videoProperty.audioframelength}}
                                </i-Col>
                            </Row>
                            <Row style="height:32px;">
                                <i-Col span="8" style="height: 100%;text-align:right;line-height:32px;">是否支持音频输出 : &nbsp;</i-Col>
                                <i-Col span="16" style="height: 100%;line-height:32px;">
                                    {{videoProperty.audiooutputsupport}}
                                </i-Col>
                            </Row>
                            <Row style="height:32px;">
                                <i-Col span="8" style="height: 100%;text-align:right;line-height:32px;">视频编码方式 : &nbsp;</i-Col>
                                <i-Col span="16" style="height: 100%;line-height:32px;">
                                    {{videoProperty.videocodec}}
                                </i-Col>
                            </Row>
                            <Row style="height:32px;">
                                <i-Col span="8" style="height: 100%;text-align:right;line-height:32px;">视频编码方式字符 : &nbsp;</i-Col>
                                <i-Col span="16" style="height: 100%;line-height:32px;">
                                    {{videoProperty.videocodecstr}}
                                </i-Col>
                            </Row>
                            <Row style="height:32px;">
                                <i-Col span="8" style="height: 100%;text-align:right;line-height:32px;">终端支持最大音频物理通道数 : &nbsp;</i-Col>
                                <i-Col span="16" style="height: 100%;line-height:32px;">
                                    {{videoProperty.audiomaxsupport}}
                                </i-Col>
                            </Row>
                            <Row style="height:32px;">
                                <i-Col span="8" style="height: 100%;text-align:right;line-height:32px;">终端支持最大视频物理通道数 : &nbsp;</i-Col>
                                <i-Col span="16" style="height: 100%;line-height:32px;">
                                    {{videoProperty.videomaxsupport}}
                                </i-Col>
                            </Row>
                        </Tab-Pane>
                        <Tab-Pane label="音视频通道列表" name="videoChannelsList">
                            <Row style="height:32px;margin: 10px 0;">
                                <i-Col span="7" offset="7" style="height: 100%;line-height:32px;">
                                    <i-button @click="queryVideoChannels" style="width:120px;" type="primary">查询</i-button>
                                </i-Col>
                            </Row>
                            <i-table border ref="table" :columns="columns" :data="tableData" height="234" :loading="loading"></i-table>
                        </Tab-Pane>
                        <Tab-Pane label="主动安全外设" name="activeSecurityPeripheral">
                            <Tabs type="card" :animated="false">
                                <Tab-Pane label="高级驾驶辅助" name="activeSecurityPeripheral1">
                                    <Row>
                                        <i-col span="6">
                                            <i-button type="primary" @click="queryActiveSafetyDeviceInfo('adas')">查询</i-button>
                                        </i-col>
                                    </Row>
                                    <Row style="line-height:32px">
                                        <i-col :span="3">
                                            公司名称:
                                        </i-col>
                                        <i-col :span="8">
                                            <i-input v-model.trim="safetyDeviceAdas.companyname" disabled style="color:#000"></i-input>
                                        </i-col>
                                        <i-col span="3" offset="2">
                                            产品型号:
                                        </i-col>
                                        <i-col :span="8">
                                            <i-input v-model.trim="safetyDeviceAdas.modelname" disabled style="color:#000"></i-input>
                                        </i-col>
                                    </Row>
                                    <Row style="line-height:32px">
                                        <i-col span="3">
                                            设备版本号:
                                        </i-col>
                                        <i-col span="8">
                                            <i-input v-model.trim="safetyDeviceAdas.hardwareversion" disabled></i-input>
                                        </i-col>
                                        <i-col span="3" offset="2">
                                            软件版本号:
                                        </i-col>
                                        <i-col span="8">
                                            <i-input v-model.trim="safetyDeviceAdas.softwareversion" disabled></i-input>
                                        </i-col>
                                    </Row>
                                    <Row style="line-height:32px">
                                        <i-col span="3">
                                            设备ID:
                                        </i-col>
                                        <i-col span="8">
                                            <i-input v-model.trim="safetyDeviceAdas.exdeviceid" disabled></i-input>
                                        </i-col>
                                        <i-col span="3" offset="2">
                                            客户代码:
                                        </i-col>
                                        <i-col span="8">
                                            <i-input v-model.trim="safetyDeviceAdas.customcode" disabled></i-input>
                                        </i-col>
                                    </Row>
                                </Tab-Pane>
                                <Tab-Pane label="驾驶员状态监测" name="activeSecurityPeripheral2">
                                    <row>
                                        <i-col span="6">
                                            <i-button type="primary" @click="queryActiveSafetyDeviceInfo('dsm')">查询</i-button>
                                        </i-col>
                                    </row>
                                    <Row style="line-height:32px">
                                        <i-col span="3">
                                            公司名称:
                                        </i-col>
                                        <i-col span="8">
                                            <i-input v-model.trim="safetyDeviceDsm.companyname" disabled></i-input>
                                        </i-col>
                                        <i-col span="3" offset="2">
                                            产品型号:
                                        </i-col>
                                        <i-col span="8">
                                            <i-input v-model.trim="safetyDeviceDsm.modelname" disabled></i-input>
                                        </i-col>
                                    </Row>
                                    <Row style="line-height:32px">
                                        <i-col span="3">
                                            设备版本号:
                                        </i-col>
                                        <i-col span="8">
                                            <i-input v-model.trim="safetyDeviceDsm.hardwareversion" disabled></i-input>
                                        </i-col>
                                        <i-col span="3" offset="2">
                                            软件版本号:
                                        </i-col>
                                        <i-col span="8">
                                            <i-input v-model.trim="safetyDeviceDsm.softwareversion" disabled></i-input>
                                        </i-col>
                                    </Row>
                                    <Row style="line-height:32px">
                                        <i-col span="3">
                                            设备ID:
                                        </i-col>
                                        <i-col span="8">
                                            <i-input v-model.trim="safetyDeviceDsm.exdeviceid" disabled></i-input>
                                        </i-col>
                                        <i-col span="3" offset="2">
                                            客户代码:
                                        </i-col>
                                        <i-col span="8">
                                            <i-input v-model.trim="safetyDeviceDsm.customcode" disabled></i-input>
                                        </i-col>
                                    </Row>
                                </Tab-Pane>
                                <Tab-Pane label="轮胎气压监测" name="activeSecurityPeripheral3">
                                    <row>
                                        <i-col span="6">
                                            <i-button type="primary" @click="queryActiveSafetyDeviceInfo('tpms')">查询</i-button>
                                        </i-col>
                                    </row>
                                    <Row style="line-height:32px">
                                        <i-col span="3">
                                            公司名称:
                                        </i-col>
                                        <i-col span="8">
                                            <i-input v-model.trim="safetyDeviceTpms.companyname" disabled></i-input>
                                        </i-col>
                                        <i-col span="3" offset="2">
                                            产品型号:
                                        </i-col>
                                        <i-col span="8">
                                            <i-input v-model.trim="safetyDeviceTpms.modelname" disabled></i-input>
                                        </i-col>
                                    </Row>
                                    <Row style="line-height:32px">
                                        <i-col span="3">
                                            设备版本号:
                                        </i-col>
                                        <i-col span="8">
                                            <i-input v-model.trim="safetyDeviceTpms.hardwareversion" disabled></i-input>
                                        </i-col>
                                        <i-col span="3" offset="2">
                                            软件版本号:
                                        </i-col>
                                        <i-col span="8">
                                            <i-input v-model.trim="safetyDeviceTpms.softwareversion" disabled></i-input>
                                        </i-col>
                                    </Row>
                                    <Row style="line-height:32px">
                                        <i-col span="3">
                                            设备ID:
                                        </i-col>
                                        <i-col span="8">
                                            <i-input v-model.trim="safetyDeviceTpms.exdeviceid" disabled></i-input>
                                        </i-col>
                                        <i-col span="3" offset="2">
                                            客户代码:
                                        </i-col>
                                        <i-col span="8">
                                            <i-input v-model.trim="safetyDeviceTpms.customcode" disabled></i-input>
                                        </i-col>
                                    </Row>
                                </Tab-Pane>
                                <Tab-Pane label="盲点监测" name="activeSecurityPeripheral4">
                                    <row>
                                        <i-col span="6">
                                            <i-button type="primary" @click="queryActiveSafetyDeviceInfo('bsd')">查询</i-button>
                                        </i-col>
                                    </row>
                                    <Row style="line-height:32px;">
                                        <i-col span="3">
                                            公司名称:
                                        </i-col>
                                        <i-col span="8">
                                            <i-input v-model.trim="safetyDeviceBsd.companyname" disabled></i-input>
                                        </i-col>
                                        <i-col span="3" offset="2">
                                            产品型号:
                                        </i-col>
                                        <i-col span="8">
                                            <i-input v-model.trim="safetyDeviceBsd.modelname" disabled></i-input>
                                        </i-col>
                                    </Row>
                                    <Row style="line-height:32px">
                                        <i-col span="3">
                                            设备版本号:
                                        </i-col>
                                        <i-col span="8">
                                            <i-input v-model.trim="safetyDeviceBsd.hardwareversion" disabled></i-input>
                                        </i-col>
                                        <i-col span="3" offset="2">
                                            软件版本号:
                                        </i-col>
                                        <i-col span="8">
                                            <i-input v-model.trim="safetyDeviceBsd.softwareversion" disabled></i-input>
                                        </i-col>
                                    </Row>
                                    <Row style="line-height:32px">
                                        <i-col span="3">
                                            设备ID:
                                        </i-col>
                                        <i-col span="8">
                                            <i-input v-model.trim="safetyDeviceBsd.exdeviceid" disabled></i-input>
                                        </i-col>
                                        <i-col span="3" offset="2">
                                            客户代码:
                                        </i-col>
                                        <i-col span="8">
                                            <i-input v-model.trim="safetyDeviceBsd.customcode" disabled></i-input>
                                        </i-col>
                                    </Row>
                                </Tab-Pane>
                            </Tabs>
                        </Tab-Pane>
                    </Tabs>
                    <div slot="footer" style="padding:10px;"></div>
                </Modal>
            </div>
            <div style="position: absolute;left: 0;right: 0;top: 50px;bottom: 0;padding: 10px">
                <div :class="videoContentCls" id="videoContent" ref="videoContent">
                    <div>
                        <div class="videoElementWrap">
                            <video id="videoElement1" controls></video>
                            <div class="play-btn-wrap" @click="onChangePlayerState(1)">
                                <Icon :type="playerState.yi?'md-square':'ios-play'" size="40" />
                            </div>
                        </div>
                        <div class="state-event-tip" v-show="playerStateTips.yi!=''">
                            <div>
                                <span v-text="playerStateTips.yi"></span>
                                <span v-text="networkSpeed.yi"></span>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="videoElementWrap">
                            <video id="videoElement2" controls></video>
                            <div class="play-btn-wrap" @click="onChangePlayerState(2)">
                                <Icon :type="playerState.er?'md-square':'ios-play'" size="40" />
                            </div>
                        </div>
                        <div class="state-event-tip" v-show="playerStateTips.er!=''">
                            <div>
                                <span v-text="playerStateTips.er"></span>
                                <span v-text="networkSpeed.er"></span>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="videoElementWrap">
                            <video id="videoElement3" controls></video>
                            <div class="play-btn-wrap" @click="onChangePlayerState(3)">
                                <Icon :type="playerState.san?'md-square':'ios-play'" size="40" />
                            </div>
                        </div>
                        <div class="state-event-tip" v-show="playerStateTips.san!=''">
                            <div>
                                <span v-text="playerStateTips.san"></span>
                                <span v-text="networkSpeed.san"></span>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="videoElementWrap">
                            <video id="videoElement4" controls></video>
                            <div class="play-btn-wrap" @click="onChangePlayerState(4)">
                                <Icon :type="playerState.si?'md-square':'ios-play'" size="40" />
                            </div>
                        </div>
                        <div class="state-event-tip" v-show="playerStateTips.si!=''">
                            <div>
                                <span v-text="playerStateTips.si"></span>
                                <span v-text="networkSpeed.si"></span>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="videoElementWrap">
                            <video id="videoElement5" controls></video>
                            <div class="play-btn-wrap" @click="onChangePlayerState(5)">
                                <Icon :type="playerState.wu?'md-square':'ios-play'" size="40" />
                            </div>
                        </div>
                        <div class="state-event-tip" v-show="playerStateTips.wu!=''">
                            <div>
                                <span v-text="playerStateTips.wu"></span>
                                <span v-text="networkSpeed.wu"></span>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="videoElementWrap">
                            <video id="videoElement6" controls></video>
                            <div class="play-btn-wrap" @click="onChangePlayerState(6)">
                                <Icon :type="playerState.liu?'md-square':'ios-play'" size="40" />
                            </div>
                        </div>
                        <div class="state-event-tip" v-show="playerStateTips.liu!=''">
                            <div>
                                <span v-text="playerStateTips.liu"></span>
                                <span v-text="networkSpeed.liu"></span>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="videoElementWrap">
                            <video id="videoElement7" controls></video>
                            <div class="play-btn-wrap" @click="onChangePlayerState(7)">
                                <Icon :type="playerState.qi?'md-square':'ios-play'" size="40" />
                            </div>
                        </div>
                        <div class="state-event-tip" v-show="playerStateTips.qi!=''">
                            <div>
                                <span v-text="playerStateTips.qi"></span>
                                <span v-text="networkSpeed.qi"></span>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="videoElementWrap">
                            <video id="videoElement8" controls></video>
                            <div class="play-btn-wrap" @click="onChangePlayerState(8)">
                                <Icon :type="playerState.ba?'md-square':'ios-play'" size="40" />
                            </div>
                        </div>
                        <div class="state-event-tip" v-show="playerStateTips.ba!=''">
                            <div>
                                <span v-text="playerStateTips.ba"></span>
                                <span v-text="networkSpeed.ba"></span>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="videoElementWrap">
                            <video id="videoElement9" controls></video>
                            <div class="play-btn-wrap" @click="onChangePlayerState(9)">
                                <Icon :type="playerState.jiu?'md-square':'ios-play'" size="40" />
                            </div>
                        </div>
                        <div class="state-event-tip" v-show="playerStateTips.jiu!=''">
                            <div>
                                <span v-text="playerStateTips.jiu"></span>
                                <span v-text="networkSpeed.jiu"></span>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="videoElementWrap">
                            <video id="videoElement10" controls></video>
                            <div class="play-btn-wrap" @click="onChangePlayerState(10)">
                                <Icon :type="playerState.shi?'md-square':'ios-play'" size="40" />
                            </div>
                        </div>
                        <div class="state-event-tip" v-show="playerStateTips.shi!=''">
                            <div>
                                <span v-text="playerStateTips.shi"></span>
                                <span v-text="networkSpeed.shi"></span>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="videoElementWrap">
                            <video id="videoElement11" controls></video>
                            <div class="play-btn-wrap" @click="onChangePlayerState(11)">
                                <Icon :type="playerState.shiyi?'md-square':'ios-play'" size="40" />
                            </div>
                        </div>
                        <div class="state-event-tip" v-show="playerStateTips.shiyi!=''">
                            <div>
                                <span v-text="playerStateTips.shiyi"></span>
                                <span v-text="networkSpeed.shiyi"></span>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="videoElementWrap">
                            <video id="videoElement12" controls></video>
                            <div class="play-btn-wrap" @click="onChangePlayerState(12)">
                                <Icon :type="playerState.shier?'md-square':'ios-play'" size="40" />
                            </div>
                        </div>
                        <div class="state-event-tip" v-show="playerStateTips.shier!=''">
                            <div>
                                <span v-text="playerStateTips.shier"></span>
                                <span v-text="networkSpeed.shier"></span>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="videoElementWrap">
                            <video id="videoElement13" controls></video>
                            <div class="play-btn-wrap" @click="onChangePlayerState(13)">
                                <Icon :type="playerState.shisan?'md-square':'ios-play'" size="40" />
                            </div>
                        </div>
                        <div class="state-event-tip" v-show="playerStateTips.shisan!=''">
                            <div>
                                <span v-text="playerStateTips.shisan"></span>
                                <span v-text="networkSpeed.shisan"></span>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="videoElementWrap">
                            <video id="videoElement14" controls></video>
                            <div class="play-btn-wrap" @click="onChangePlayerState(14)">
                                <Icon :type="playerState.shisi?'md-square':'ios-play'" size="40" />
                            </div>
                        </div>
                        <div class="state-event-tip" v-show="playerStateTips.shisi!=''">
                            <div>
                                <span v-text="playerStateTips.shisi"></span>
                                <span v-text="networkSpeed.shisi"></span>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="videoElementWrap">
                            <video id="videoElement15" controls></video>
                            <div class="play-btn-wrap" @click="onChangePlayerState(15)">
                                <Icon :type="playerState.shiwu?'md-square':'ios-play'" size="40" />
                            </div>
                        </div>
                        <div class="state-event-tip" v-show="playerStateTips.shiwu!=''">
                            <div>
                                <span v-text="playerStateTips.shiwu"></span>
                                <span v-text="networkSpeed.shiwu"></span>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="videoElementWrap">
                            <video id="videoElement16" controls></video>
                            <div class="play-btn-wrap" @click="onChangePlayerState(16)">
                                <Icon :type="playerState.shiliu?'md-square':'ios-play'" size="40" />
                            </div>
                        </div>
                        <div class="state-event-tip" v-show="playerStateTips.shiliu!=''">
                            <div>
                                <span v-text="playerStateTips.shiliu"></span>
                                <span v-text="networkSpeed.shiliu"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>


    </div>
    <script src="js/polyfill.min.js"></script>
    <script src="dist/vue.min.js"></script>
    <script src="dist/iview.min.js"></script>
    <script src="js/gps51-jquery.js"></script>
    <script src="js/config.js"></script>
    <script src="js/dateformat.js"></script>
    <script src="js/js.cookie.min.js"></script>
    <script src="js/util.js"></script>
    <script src="js/lame.min.js"></script>
    <script>
        (function(window) {
            //兼容
            window.URL = window.URL || window.webkitURL;
            navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

            var HZRecorder = function(stream, config) {
                config = config || {};
                config.sampleBits = config.sampleBits || 8; //采样数位 8, 16
                config.sampleRate = config.sampleRate || (44100 / 6); //采样率(1/6 44100)

                var context = new(window.webkitAudioContext || window.AudioContext)();
                var audioInput = context.createMediaStreamSource(stream);
                var createScript = context.createScriptProcessor || context.createJavaScriptNode;
                var recorder = createScript.apply(context, [16384, 1, 1]);
                lame = new lamejs();
                mp3Encoder = new lame.Mp3Encoder(1, config.sampleRate || 44100, config.sampleBits || 128);


                var floatTo16BitPCM = function(input, output) {
                    for (var i = 0; i < input.length; i++) {
                        var s = Math.max(-1, Math.min(1, input[i]));
                        output[i] = (s < 0 ? s * 0x8000 : s * 0x7FFF);
                    }
                };

                var convertBuffer = function(arrayBuffer) {
                    var data = new Float32Array(arrayBuffer);
                    var out = new Int16Array(arrayBuffer.length);
                    floatTo16BitPCM(data, out);
                    return out;
                };

                var encode = function(arrayBuffer) {
                    var transformData = [];
                    var maxSamples = 1152;
                    var samplesMono = convertBuffer(arrayBuffer);
                    var remaining = samplesMono.length;
                    for (var i = 0; remaining >= 0; i += maxSamples) {
                        var left = samplesMono.subarray(i, i + maxSamples);
                        var mp3buf = mp3Encoder.encodeBuffer(left);
                        transformData.push(mp3buf);
                        remaining -= maxSamples;
                    }
                    // transformData.push(mp3Encoder.flush());
                    return transformData;
                };
                var audioData = {
                    size: 0 //录音文件长度
                        ,
                    buffer: [] //录音缓存
                        ,
                    callback: config.callback,
                    inputSampleRate: context.sampleRate //输入采样率
                        ,
                    inputSampleBits: 16 //输入采样数位 8, 16
                        ,
                    outputSampleRate: config.sampleRate //输出采样率
                        ,
                    oututSampleBits: config.sampleBits //输出采样数位 8, 16
                        ,
                    input: function(data) {
                        //this.buffer = [];
                        // this.buffer.push(new Float32Array(data));
                        this.buffer = data;
                        //this.buffer = new Float32Array(data);
                        this.size += data.length;
                        this.encodeMP3();

                    },
                    encodeMP3: function() {
                        var that = this;
                        var mp3Buffer = encode(this.buffer);
                        var blob = new Blob(mp3Buffer, {
                            type: 'audio/mp3'
                        });
                        var reader = new FileReader();
                        reader.readAsArrayBuffer(blob);
                        reader.onload = function(e) {
                            var buf = new Uint8Array(reader.result);
                            var dataLength = buf.length;
                            that.callback && that.callback(config.sampleRate, config.sampleBits, dataLength, buf);
                        }
                    }

                };

                //开始录音
                this.start = function() {
                    audioInput.connect(recorder);
                    recorder.connect(context.destination);
                }

                //停止
                this.stop = function() {

                    recorder.disconnect();
                }

                //音频采集
                recorder.onaudioprocess = function(e) {
                    audioData.input(e.inputBuffer.getChannelData(0));
                    //record(e.inputBuffer.getChannelData(0));
                }

            };
            //抛出异常
            HZRecorder.throwError = function(message) {
                    // alert(message);
                    new Vue().$Message.error(message);
                    // throw new function () { this.toString = function () { return message; } }
                }
                //是否支持录音
            HZRecorder.canRecording = (navigator.getUserMedia != null);
            //获取录音机
            HZRecorder.get = function(callback, config) {
                if (callback) {
                    if (navigator.getUserMedia) {
                        navigator.getUserMedia({
                                audio: true,
                                audio: true
                            } //只启用音频
                            ,
                            function(stream) {
                                var rec = new HZRecorder(stream, config);
                                callback(rec);
                            },
                            function(error) {
                                switch (error.code || error.name) {
                                    case 'PERMISSION_DENIED':
                                    case 'PermissionDeniedError':
                                        HZRecorder.throwError('用户拒绝提供信息。');
                                        break;
                                    case 'NOT_SUPPORTED_ERROR':
                                    case 'NotSupportedError':
                                        HZRecorder.throwError('浏览器不支持硬件设备。');
                                        break;
                                    case 'MANDATORY_UNSATISFIED_ERROR':
                                    case 'MandatoryUnsatisfiedError':
                                        HZRecorder.throwError('无法发现指定的硬件设备。');
                                        break;
                                    case 8:
                                        HZRecorder.throwError('没有检测到录音设备,无法录音。');
                                        break;
                                    default:
                                        HZRecorder.throwError('无法打开麦克风。异常信息:' + (error.code || error.name));
                                        break;
                                }
                            });
                    } else {
                        HZRecorder.throwError('当前浏览器不支持录音功能。');
                        return;
                    }
                }
            }

            // 判断端字节序
            HZRecorder.littleEdian = (function() {
                var buffer = new ArrayBuffer(2);
                new DataView(buffer).setInt16(0, 256, true);
                return new Int16Array(buffer)[0] === 256 ? 1 : 0;
            })();

            window.HZRecorder = HZRecorder;

        })(window);


        var isSendAjaxState = {
            'yi': false,
            'er': false,
            'san': false,
            'si': false,
            'wu': false,
            'liu': false,
            'qi': false,
            'ba': false,
            'jiu': false,
            'shi': false,
            'shiyi': false,
            'shier': false,
            'shisan': false,
            'shisi': false,
            'shiwu': false,
            'shiliu': false,
        };

        var myRecorder = null;
        var sn = 0;
        var deviceid = utils.getParameterByName("deviceid");
        var token = utils.getParameterByName("token");
        var mapType = utils.getParameterByName("maptype");
        var devName = utils.getParameterByName("name");
        var activeSafety = utils.getParameterByName("activesafety");
        var deviceState = utils.getParameterByName("state");
        // var playerStates = {};
        var playerStateKeyList = ['', 'yi', 'er', 'san', 'si', 'wu', 'liu', 'qi', 'ba', 'jiu', 'shi', 'shiyi', 'shier', 'shisan', 'shisi', 'shiwu', 'shiliu'];
        var audioPlayer = null;
        var audioPlayerTime = 0;
        if (deviceState == '' || deviceState == 'null' || deviceState == 'undefined') {
            deviceState = null;
        }
        if (deviceState != null) {
            deviceState = "视频状态 ：" + deviceState;
        }

        HZRecorder.get(
            function(rec) {
                myRecorder = rec;
            }, {
                sampleRate: 44100,
                sampleBits: 128,
                callback: function(sampleRate, sampleBits, dataLength, bytes) {
                    sn++;
                    var url = myUrls.uploadAudio();
                    var data = {
                        deviceid: deviceid,
                        codec: 'mp3',
                        datasize: dataLength,
                        samplebits: 32,
                        littleedian: HZRecorder.littleEdian,
                        channel: vRoot.audiochannel,
                        sn: sn,
                        // data:arrayBufferToBase64(buf),
                        hexdata: utils.Bytes2HexStr(bytes),
                        numberofchannels: 1,
                        samplerate: sampleRate,
                    };
                    sn++;
                    utils.sendAjax(url, data, function(resp) {
                        console.log('resp', resp);
                    })
                }
            });
        var vRoot = new Vue({
            el: "#container",
            data: {
                deviceState: deviceState,
                playerState: {
                    'yi': false,
                    'er': false,
                    'san': false,
                    'si': false,
                    'wu': false,
                    'liu': false,
                    'qi': false,
                    'ba': false,
                    'jiu': false,
                    'shi': false,
                    'shiyi': false,
                    'shier': false,
                    'shisan': false,
                    'shisi': false,
                    'shiwu': false,
                    'shiliu': false,
                },
                playerStateTips: {
                    'yi': '',
                    'er': '',
                    'san': '',
                    'si': '',
                    'wu': '',
                    'liu': '',
                    'qi': '',
                    'ba': '',
                    'jiu': '',
                    'shi': '',
                    'shiyi': '',
                    'shier': '',
                    'shisan': '',
                    'shisi': '',
                    'shiwu': '',
                    'shiliu': '',
                },
                networkSpeed: {
                    'yi': '0KB/S',
                    'er': '0KB/S',
                    'san': '0KB/S',
                    'si': '0KB/S',
                    'wu': '0KB/S',
                    'liu': '0KB/S',
                    'qi': '0KB/S',
                    'ba': '0KB/S',
                    'jiu': '0KB/S',
                    'shi': '0KB/S',
                    'shiyi': '0KB/S',
                    'shier': '0KB/S',
                    'shisan': '0KB/S',
                    'shisi': '0KB/S',
                    'shiwu': '0KB/S',
                    'shiliu': '0KB/S'
                },
                modalHader: '视频参数',
                physicalchannel1: '0',
                physicalchannel2: '0',
                physicalchannel3: '0',
                physicalchannel4: '0',
                activeSafety: activeSafety == '1' ? true : false,
                activeSafetyStr: '主动安全',
                brightness: 128, //1     亮度
                constract: 0, // 2      对比度
                hue: 0, //         色度                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      
                saturate: 128, // 4       饱和度                                                                                  
                exposure: 128, // 5 
                audioPlayerTip: '对讲请先点击以下按钮',
                isLuyin: false,
                speechTimer: null,
                imgSrc: './images/luyin/ic_record_ripple@2x-9.png',
                isOpenJianting: false,
                modalHader: '视频参数',
                viewSize: 2, // 1 1:1  2
                activeMenuItem: 'video',
                videoContentWH: {
                    width: 0,
                    height: 0
                },
                devInfo: '',
                videoProperty: {},
                setupModal: false,
                videoPropertyModal: false,
                isFullScreen: false,
                videoNumber: 4,
                videoIns: {}, // videojs 实例
                Spin: false,
                allPlayUrls: [],
                videoTimes: {},

                // 音视频参数设置
                realtimebitratemode: '',
                storebitratemode: '',
                realtimeresolution: '',
                storeresolution: '',
                realtimekeyframeinterval: '',
                storekeyframeinterval: '',
                realtimeframerate: '',
                storeframerate: '',
                realtimeframebitrate: '',
                storeframebitrate: '',
                videoCheckboxGroup: [],
                usingaudio: '',


                // 视频播放参数
                videotranstype: '',
                videostreamtype: '',
                audiochannel: '',
                historyaudiocodec: '0',
                needuploadfilename: false,
                videotimestamptype: '0',
                videochannelcount: 4,

                // channelnum
                channelsData: [],

                //云台
                isShowYunTai: false,
                listingChoice: 'duijiang',

                loading: false,
                columns: [{
                    key: 'physicalchannel',
                    title: '物理通道号',
                }, {
                    key: 'logicalchannel',
                    title: '逻辑通道号',
                }, {
                    key: 'channeltype',
                    title: '通道类型',
                    render: function(h, params) {
                        var channeltype = params.row.channeltype,
                            type;
                        if (channeltype === 0) {
                            type = '音视频'
                        } else if (channeltype === 1) {
                            type = '音频'
                        } else if (channeltype === 2) {
                            type = '视频'
                        }
                        return h('span', {}, type);
                    }
                }, {
                    key: 'connectptz',
                    title: '是否连接云台',
                    render: function(h, params) {
                        var connectptz = params.row.connectptz;
                        return h('span', {}, connectptz === 0 ? '未连接' : '已连接');
                    }
                }, ],
                tableData: [],
                safetyDeviceAdas: {},
                safetyDeviceDsm: {},
                safetyDeviceTpms: {},
                safetyDeviceBsd: {},
            },
            methods: {
                onChangePlayerState: function(index) {
                    if (isSendAjaxState[playerStateKeyList[index]]) {
                        this.$Message.error("正在加载当前视频,请稍后...");
                        return;
                    };

                    var playerKey = playerStateKeyList[index];
                    // var state = this.playerState[playerKey] = !this.playerState[playerKey];
                    // if (state) {
                    //     this.playerStateTips[playerStateKeyList[index]] = '正在请求播放视频';
                    //     this.handleStartVideos(index);
                    // } else {
                    //     this.handleStopVideos(index);
                    // }
                    if (this.playerState[playerKey]) {
                        this.handleStopVideos(index);
                        this.playerState[playerKey] = !this.playerState[playerKey];
                    } else {
                        this.handleStartVideos(index);
                    }
                },
                queryActiveSafetyDeviceInfo: function(exdevicename) {
                    var url = myUrls.queryActiveSafetyDeviceInfo(),
                        me = this;
                    var data = {
                        deviceid: deviceid,
                        exdevicename: exdevicename,
                        action: 'info'
                    };
                    me.Spin = true;
                    utils.sendAjax(url, data, function(resp) {
                        me.Spin = false;
                        var status = resp.status;
                        if (status == CMD_SEND_RESULT_UNCONFIRM) {
                            me.$Message.error('发送成功，未收到确认');
                        } else if (status === CMD_SEND_RESULT_PASSWORD_ERROR) {
                            me.$Message.error('密码错误');
                        } else if (status === CMD_SEND_RESULT_OFFLINE_NOT_CACHE) {
                            me.$Message.error("设备离线，未缓存");
                        } else if (status === CMD_SEND_RESULT_OFFLINE_CACHED) {
                            me.$Message.error("设备离线，已缓存");
                        } else if (status === CMD_SEND_RESULT_MODIFY_DEFAULT_PASSWORD) {
                            me.$Message.error("需要修改默认密码");
                        } else if (status === CMD_SEND_RESULT_DETAIL_ERROR) {
                            me.$Message.error("错误:" + resp.cause);
                        } else if (status === CMD_SEND_CONFIRMED) {
                            switch (exdevicename) {
                                case 'adas':
                                    me.safetyDeviceAdas = resp;
                                    break;
                                case 'dsm':
                                    me.safetyDeviceDsm = resp;
                                    break;
                                case 'tpms':
                                    me.safetyDeviceTpms = resp;
                                    break;
                                case 'bsd':
                                    me.safetyDeviceBsd = resp;
                                    break;
                                default:
                                    console.log('tag', '');
                            }
                        } else if (status === CMD_SEND_OVER_RETRY_TIMES) {
                            me.$Message.error("尝试发送3次失败");
                        } else if (status === CMD_SEND_SYNC_TIMEOUT) {
                            me.$Message.error("发送超时");
                        }
                    })
                },
                defaultQualityParams: function() {
                    var me = this;
                    me.brightness = 128;
                    me.constract = 0;
                    me.hue = 0;
                    me.saturate = 128;
                    me.exposure = 128;
                },
                sendPaneColorControl: utils.debounce(function(vm) {
                    var url = myUrls.setImageQuality(),
                        data = {
                            deviceid: deviceid,
                            channel: 2,
                            brightness: vm.brightness,
                            constract: vm.constract,
                            hue: vm.hue,
                            saturate: vm.saturate,
                            exposure: vm.exposure
                        };
                    utils.sendAjax(url, data, function(resp) {
                        console.log('resp', resp);
                    });
                }, 300),
                onMousedown: function() {
                    var that = this;
                    if (!that.isOpenJianting) {
                        that.$Message.success("请先开启监听");
                        return;
                    }
                    try {
                        that.isLuyin = true;
                        that.setSpeechTimer();
                        myRecorder.start();
                        document.onmouseup = function() {
                            that.isLuyin = false;
                            myRecorder.stop();
                            document.onmousemove = null;
                            document.onmouseup = null;
                            clearTimeout(that.speechTimer);
                            setTimeout(function() {
                                sn = 1;
                            }, 1000);
                        };
                    } catch (error) {
                        vRoot.$Message.error('浏览器不支持录音功能')
                    }
                    return false;
                },
                openDuijiang: function() {
                    var me = this;
                    if (this.isOpenJianting) {
                        this.isOpenJianting = false;
                        audioPlayer.pause();
                        audioPlayerTime = 0;
                        me.$Message.success("关闭成功");
                        me.audioPlayerTip = '监听已关闭';
                        var url = myUrls.stopAudio();
                        utils.sendAjax(url, {
                            deviceid: deviceid,
                            channel: Number(this.audiochannel),
                        }, function() {});
                    } else {
                        this.loading = true;

                        var url = myUrls.startAudio();
                        var data = {
                            deviceid: deviceid,
                            channel: Number(this.audiochannel),
                            datatype: 2,
                            playtype: ishttps ? 'flvs' : 'flv',
                        }
                        utils.sendAjax(url, data, function(resp) {
                            me.loading = false;
                            if (resp.status === 6) {
                                me.isOpenJianting = true;
                                me.$Message.success("开启成功");
                                audioPlayerTime = Date.now();
                                me.initAudioPlayer(resp.record.playurl);
                                me.audioPlayerTip = '监听已打开，请按住说话'
                            } else {
                                me.$Message.success("开启失败,超时或者设备不在线");
                            }
                        });
                    }

                },
                queryVideoChannels: function() {
                    var url = myUrls.queryAudioVideoChannels(),
                        me = this;
                    me.loading = true;
                    utils.sendAjax(url, {
                        deviceid: deviceid
                    }, function(resp) {
                        me.loading = false;
                        var status = resp.status;
                        if (status == CMD_SEND_RESULT_UNCONFIRM) {
                            me.$Message.error('发送成功，未收到确认');
                        } else if (status === CMD_SEND_RESULT_PASSWORD_ERROR) {
                            me.$Message.error('密码错误');
                        } else if (status === CMD_SEND_RESULT_OFFLINE_NOT_CACHE) {
                            me.$Message.error("设备离线，未缓存");
                        } else if (status === CMD_SEND_RESULT_OFFLINE_CACHED) {
                            me.$Message.error("设备离线，已缓存");
                        } else if (status === CMD_SEND_RESULT_MODIFY_DEFAULT_PASSWORD) {
                            me.$Message.error("需要修改默认密码");
                        } else if (status === CMD_SEND_RESULT_DETAIL_ERROR) {
                            me.$Message.error("错误:" + resp.cause);
                        } else if (status === CMD_SEND_CONFIRMED) {
                            me.tableData = resp.uniaudiovideochannels.channels;
                        } else if (status === CMD_SEND_OVER_RETRY_TIMES) {
                            me.$Message.error("尝试发送3次失败");
                        } else if (status === CMD_SEND_SYNC_TIMEOUT) {
                            me.$Message.error("发送超时");
                        }
                    });
                },
                videoBack: function() {
                    window.open('videoback.html?deviceid=' + deviceid + '&token=' + token);
                },
                videoDsm: function() {
                    window.open('activesafety.html?deviceid=' + deviceid + '&token=' + token + "&maptype=" + mapType);
                },
                handlePlayAllVideos: function() {
                    for (var i = 0; i < this.videoNumber; i++) {
                        var flvPlayer = this.videoIns[i + 1];
                        this.playerState[playerStateKeyList[i + 1]] = true;
                        if (flvPlayer) {
                            flvPlayer.play();
                        } else {
                            this.handleStartVideos(i + 1);
                        }
                    }
                },
                handleScreenSize: function(type) {
                    if (this.viewSize == type) return;
                    this.viewSize = type;
                    var aspectRatio = '';
                    switch (type) {
                        case 1:
                            aspectRatio = '1:1';
                            break;
                        case 2:
                            aspectRatio = '4:3';
                            break;
                        case 3:
                            aspectRatio = '16:9';
                            break;
                    }
                    for (var key in this.videoIns) {
                        var player = this.videoIns[key];
                        player.aspectRatio(aspectRatio);
                    }
                },
                defaultClientParameters: function() {
                    var audiovideoparameters = {
                        carnum: true,
                        channel: true,
                        dateandtime: true,
                        drivingtime: false,
                        gpsspeed: false,
                        latlon: true,
                        osdsetting: 31,
                        realtimebitratemode: 0,
                        realtimeframebitrate: 2000,
                        realtimeframerate: 12,
                        realtimekeyframeinterval: 25,
                        realtimeresolution: 1,
                        recorderspeed: false,
                        storebitratemode: 1,
                        storeframebitrate: 2000,
                        storeframerate: 12,
                        storekeyframeinterval: 25,
                        storeresolution: 3,
                        usingaudio: 1,
                    };
                    var videoCheckboxGroup = [],
                        me = this;
                    me.realtimebitratemode = audiovideoparameters.realtimebitratemode + '';
                    me.storebitratemode = audiovideoparameters.storebitratemode + '';
                    me.realtimeresolution = audiovideoparameters.realtimeresolution + '';
                    me.storeresolution = audiovideoparameters.storeresolution + '';
                    me.realtimekeyframeinterval = audiovideoparameters.realtimekeyframeinterval;
                    me.storekeyframeinterval = audiovideoparameters.storekeyframeinterval;
                    me.realtimeframerate = audiovideoparameters.realtimeframerate;
                    me.storeframerate = audiovideoparameters.storeframerate;
                    me.realtimeframebitrate = audiovideoparameters.realtimeframebitrate;
                    me.storeframebitrate = audiovideoparameters.storeframebitrate;
                    me.usingaudio = audiovideoparameters.usingaudio + '';
                    audiovideoparameters.carnum ? videoCheckboxGroup.push('carnum') : null;
                    audiovideoparameters.channel ? videoCheckboxGroup.push('channel') : null;
                    audiovideoparameters.dateandtime ? videoCheckboxGroup.push('dateandtime') : null;
                    audiovideoparameters.drivingtime ? videoCheckboxGroup.push('drivingtime') : null;
                    audiovideoparameters.gpsspeed ? videoCheckboxGroup.push('gpsspeed') : null;
                    audiovideoparameters.latlon ? videoCheckboxGroup.push('latlon') : null;
                    audiovideoparameters.recorderspeed ? videoCheckboxGroup.push('recorderspeed') : null;
                    me.videoCheckboxGroup = videoCheckboxGroup;
                },
                queryClientParameters: function() {
                    this.Spin = true;
                    var url = myUrls.queryClientParameters(),
                        me = this;
                    utils.sendAjax(url, {
                        deviceid: deviceid
                    }, function(data) {
                        me.Spin = false;
                        var status = data.status;
                        var audiovideoparameters = data.audiovideoparameters;
                        if (audiovideoparameters != null) {
                            if (status == CMD_SEND_RESULT_UNCONFIRM) {
                                me.$Message.error('发送成功，未收到确认');
                            } else if (status === CMD_SEND_RESULT_PASSWORD_ERROR) {
                                me.$Message.error('密码错误');
                            } else if (status === CMD_SEND_RESULT_OFFLINE_NOT_CACHE) {
                                me.$Message.error("设备离线，未缓存");
                            } else if (status === CMD_SEND_RESULT_OFFLINE_CACHED) {
                                me.$Message.error("设备离线，已缓存");
                            } else if (status === CMD_SEND_RESULT_MODIFY_DEFAULT_PASSWORD) {
                                me.$Message.error("需要修改默认密码");
                            } else if (status === CMD_SEND_RESULT_DETAIL_ERROR) {
                                me.$Message.error("错误:" + resp.cause);
                            } else if (status === CMD_SEND_CONFIRMED) {
                                me.$Message.success("查询成功!");
                                var videoCheckboxGroup = [];
                                me.realtimebitratemode = audiovideoparameters.realtimebitratemode + '';
                                me.storebitratemode = audiovideoparameters.storebitratemode + '';
                                me.realtimeresolution = audiovideoparameters.realtimeresolution + '';
                                me.storeresolution = audiovideoparameters.storeresolution + '';
                                me.realtimekeyframeinterval = audiovideoparameters.realtimekeyframeinterval;
                                me.storekeyframeinterval = audiovideoparameters.storekeyframeinterval;
                                me.realtimeframerate = audiovideoparameters.realtimeframerate;
                                me.storeframerate = audiovideoparameters.storeframerate;
                                me.realtimeframebitrate = audiovideoparameters.realtimeframebitrate;
                                me.storeframebitrate = audiovideoparameters.storeframebitrate;
                                me.usingaudio = audiovideoparameters.usingaudio + '';
                                audiovideoparameters.carnum ? videoCheckboxGroup.push('carnum') : null;
                                audiovideoparameters.channel ? videoCheckboxGroup.push('channel') : null;
                                audiovideoparameters.dateandtime ? videoCheckboxGroup.push('dateandtime') : null;
                                audiovideoparameters.drivingtime ? videoCheckboxGroup.push('drivingtime') : null;
                                audiovideoparameters.gpsspeed ? videoCheckboxGroup.push('gpsspeed') : null;
                                audiovideoparameters.latlon ? videoCheckboxGroup.push('latlon') : null;
                                audiovideoparameters.recorderspeed ? videoCheckboxGroup.push('recorderspeed') : null;
                                me.videoCheckboxGroup = videoCheckboxGroup;

                            } else if (status === CMD_SEND_OVER_RETRY_TIMES) {
                                me.$Message.error("尝试发送3次失败");
                            } else if (status === CMD_SEND_SYNC_TIMEOUT) {
                                me.$Message.error("发送超时");
                            }
                        } else {
                            me.$Message.error("设备没有返回数据");
                        }

                    });
                },
                setClientParameters: function() {
                    var parameters = {};
                    if (
                        this.realtimebitratemode &&
                        this.storebitratemode &&
                        this.realtimeresolution &&
                        this.storeresolution &&
                        this.realtimekeyframeinterval &&
                        this.storekeyframeinterval &&
                        this.realtimeframerate &&
                        this.realtimeframebitrate &&
                        this.storeframebitrate &&
                        this.usingaudio !== ''
                    ) {

                        parameters.realtimebitratemode = Number(this.realtimebitratemode);
                        parameters.storebitratemode = Number(this.storebitratemode);
                        parameters.realtimeresolution = Number(this.realtimeresolution);
                        parameters.storeresolution = Number(this.storeresolution);
                        parameters.realtimekeyframeinterval = this.realtimekeyframeinterval;
                        parameters.storekeyframeinterval = this.storekeyframeinterval;
                        parameters.realtimeframerate = this.realtimeframerate;
                        parameters.realtimeframebitrate = this.realtimeframebitrate;
                        parameters.storeframebitrate = this.storeframebitrate;
                        parameters.usingaudio = Number(this.usingaudio);

                        var options = ['dateandtime', 'carnum', 'channel', 'latlon', 'recorderspeed', 'gpsspeed', 'drivingtime'];
                        var videoCheckboxGroup = this.videoCheckboxGroup;
                        var url = myUrls.setAudioVideoParameters_Sync(),
                            me = this;
                        options.forEach(function(item) {
                            if (videoCheckboxGroup.indexOf(item) != -1) {
                                parameters[item] = true;
                            } else {
                                parameters[item] = false;
                            }
                        })
                        parameters.deviceid = deviceid;
                        me.Spin = true;
                        utils.sendAjax(url, parameters, function(resp) {
                            var status = resp.status;
                            me.Spin = false;
                            if (status == CMD_SEND_RESULT_UNCONFIRM) {
                                me.$Message.error('发送成功，未收到确认');
                            } else if (status === CMD_SEND_RESULT_PASSWORD_ERROR) {
                                me.$Message.error('密码错误');
                            } else if (status === CMD_SEND_RESULT_OFFLINE_NOT_CACHE) {
                                me.$Message.error("设备离线，未缓存");
                            } else if (status === CMD_SEND_RESULT_OFFLINE_CACHED) {
                                me.$Message.error("设备离线，已缓存");
                            } else if (status === CMD_SEND_RESULT_MODIFY_DEFAULT_PASSWORD) {
                                me.$Message.error("需要修改默认密码");
                            } else if (status === CMD_SEND_RESULT_DETAIL_ERROR) {
                                me.$Message.error("错误:" + resp.cause);
                            } else if (status === CMD_SEND_CONFIRMED) {
                                me.$Message.success("发送成功");
                            } else if (status === CMD_SEND_OVER_RETRY_TIMES) {
                                me.$Message.error("尝试发送3次失败");
                            } else if (status === CMD_SEND_SYNC_TIMEOUT) {
                                me.$Message.error("发送超时");
                            }
                        })
                    } else {
                        this.$Message.error("请填写全部参数")
                    }

                },
                queryVideoPlayParameters: function() {
                    var url = myUrls.queryVideoPlayParameters(),
                        me = this;
                    utils.sendAjax(url, {
                        deviceid: deviceid
                    }, function(respData) {
                        if (respData.status == 0) {
                            me.historyaudiocodec = String(respData.historyaudiocodec);
                            me.needuploadfilename = respData.needuploadfilename == 1 ? true : false;
                            me.videotimestamptype = String(respData.videotimestamptype);
                            me.videochannelcount = Number(respData.videochannelcount);
                            var channelinfos = respData.channelinfos;
                            channelinfos.forEach(function(item) {
                                if (item.physicalchannel == 1) {
                                    me.physicalchannel1 = String(item.channeltype);
                                } else if (item.physicalchannel == 2) {
                                    me.physicalchannel2 = String(item.channeltype);
                                } else if (item.physicalchannel == 3) {
                                    me.physicalchannel3 = String(item.channeltype);
                                } else if (item.physicalchannel == 4) {
                                    me.physicalchannel4 = String(item.channeltype);
                                }
                            });
                            me.$Message.success("查询成功");
                        } else {
                            me.$Message.error("查询失败");
                        }
                    });
                },
                queryVideoProperty: function() {
                    this.Spin = true;
                    var url = myUrls.queryVideoProperty(),
                        that = this;
                    utils.sendAjax(url, {
                        deviceid: deviceid
                    }, function(data) {
                        var status = data.status;
                        if (status == CMD_SEND_RESULT_UNCONFIRM) {
                            that.$Message.error('发送成功，未收到确认');
                        } else if (status === CMD_SEND_RESULT_PASSWORD_ERROR) {
                            that.$Message.error('密码错误');
                        } else if (status === CMD_SEND_RESULT_OFFLINE_NOT_CACHE) {
                            that.$Message.error("设备离线，未缓存");
                        } else if (status === CMD_SEND_RESULT_OFFLINE_CACHED) {
                            that.$Message.error("设备离线，已缓存");
                        } else if (status === CMD_SEND_RESULT_MODIFY_DEFAULT_PASSWORD) {
                            that.$Message.error("需要修改默认密码");
                        } else if (status === CMD_SEND_RESULT_DETAIL_ERROR) {
                            that.$Message.error("错误:" + resp.cause);
                        } else if (status === CMD_SEND_CONFIRMED) {
                            that.$Message.success("查询成功");
                            var audiosamplerate = data.audiosamplerate;
                            switch (audiosamplerate) {
                                case 0:
                                    data.audiosamplerate = '8 kHz';
                                    break;
                                case 1:
                                    data.audiosamplerate = '22.05 kHz';
                                    break;
                                case 2:
                                    data.audiosamplerate = '44.1 kHz';
                                    break;
                                case 3:
                                    data.audiosamplerate = '48 kHz';
                                    break;
                            }
                            var audiosamplebits = data.audiosamplebits;
                            switch (audiosamplebits) {
                                case 0:
                                    data.audiosamplebits = '8bits';
                                    break;
                                case 1:
                                    data.audiosamplebits = '16bits';
                                    break;
                                case 2:
                                    data.audiosamplebits = '32bits';
                                    break;
                            }
                            that.videoProperty = data;
                            that.videoPropertyModal = true;
                        } else if (status === CMD_SEND_OVER_RETRY_TIMES) {
                            that.$Message.error("尝试发送3次失败");
                        } else if (status === CMD_SEND_SYNC_TIMEOUT) {
                            that.$Message.error("发送超时");
                        }
                        that.Spin = false;
                    })
                },

                handleStopAllVideos: function() {
                    var url = myUrls.stopVideos(),
                        me = this;
                    utils.sendAjax(url, {
                        deviceid: deviceid,
                        channels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]
                    }, function(resp) {
                        var records = resp.records,
                            status = resp.status;
                        me.$Message.success("停止全部成功");
                    })
                    this.videoTimes = {};
                    for (var key in this.videoIns) {
                        try {
                            var player = this.videoIns[key];
                            // player.pause();
                            player.unload();
                            player.detachMediaElement();
                            player.destroy();
                            this.videoIns[key] = null;
                        } catch (error) {};
                        this.playerState[playerStateKeyList[key]] = false;
                        this.playerStateTips[playerStateKeyList[key]] = '';
                        isSendAjaxState[playerStateKeyList[key]] = false;
                    };

                },
                handleStartVideos: function(index) {
                    var key = playerStateKeyList[index];
                    isSendAjaxState[key] = true;
                    var url = myUrls.startVideos(),
                        me = this;
                    this.playerStateTips[key] = "正在请求播放";
                    utils.sendAjax(url, {
                        deviceid: deviceid,
                        channels: [Number(index)],
                        playtype: ishttps ? 'flvs' : 'flv',
                    }, function(resp) {
                        isSendAjaxState[key] = false;
                        var records = resp.records,
                            status = resp.status;
                        var player = me.videoIns[index];

                        if (status == CMD_SEND_RESULT_UNCONFIRM) {
                            me.$Message.error('发送成功，未收到确认');
                        } else if (status === CMD_SEND_RESULT_PASSWORD_ERROR) {
                            me.$Message.error('密码错误');
                        } else if (status === CMD_SEND_RESULT_OFFLINE_NOT_CACHE) {
                            me.$Message.error("设备离线，未缓存");
                        } else if (status === CMD_SEND_RESULT_OFFLINE_CACHED) {
                            me.$Message.error("设备离线，已缓存");
                        } else if (status === CMD_SEND_RESULT_MODIFY_DEFAULT_PASSWORD) {
                            me.$Message.error("需要修改默认密码");
                        } else if (status === CMD_SEND_RESULT_DETAIL_ERROR) {
                            me.$Message.error("错误:" + resp.cause);
                        } else if (status === CMD_SEND_CONFIRMED) {
                            var acc = resp.acc
                            var accState = '';
                            if (acc === 3) {
                                accState = 'ACC开,'
                            } else if (acc === 2) {
                                accState = 'ACC关,'
                            }
                            me.$Message.success(accState + "请求播放成功,请稍后...");
                            me.switchflvPlayer(index, records[0].playurl, records[0].hasaudio);
                            me.playerState[key] = true;
                        } else if (status === CMD_SEND_OVER_RETRY_TIMES) {
                            me.$Message.error("尝试发送3次失败");
                        } else if (status === CMD_SEND_SYNC_TIMEOUT) {
                            // var acc = resp.acc
                            // isNeedRecreate = false;
                            // var oldSrc = player.src();
                            // var newSrc = records[0].playurl;
                            // // var newSrc = 'rtmp://58.200.131.2:1935/livetv/hunantv';
                            // if (!playerStates[index]) {
                            var accState = '';
                            if (acc === 3) {
                                accState = 'ACC开,'
                            } else if (acc === 2) {
                                accState = 'ACC关,'
                            }
                            me.$Message.error(accState + "请求播放超时");
                            // };

                            // if (oldSrc !== newSrc) {
                            //     player.src(newSrc);
                            // }
                            me.switchflvPlayer(index, records[0].playurl, records[0].hasaudio);
                            me.playerState[key] = true;
                        }

                    }, function() {
                        me.$Message.error("请求超时");
                        isSendAjaxState[key] = false;
                    })
                },

                handleStopVideos: function(index) {
                    var url = myUrls.stopVideos(),
                        me = this;
                    utils.sendAjax(url, {
                        deviceid: deviceid,
                        channels: [Number(index)],
                        videoclosetype: 0
                    }, function(resp) {
                        if (resp.status === 0) {
                            // me.$Message.success("停止成功")
                            // me.videoIns.forEach(function (item) {
                            //     item.pause();
                            // });
                        } else if (status === 1) {

                        } else if (status === 2) {
                            me.$Message.error("设备不在线");
                        } else if (status === 3) {

                        } else if (status === 4) {

                        } else if (status === 5) {
                            me.$Message.error("错误:" + resp.cause);
                        }
                    });

                    try {
                        var player = this.videoIns[index];
                        if (player != null) {
                            player.pause();
                            player.unload();
                            player.detachMediaElement();
                            player.destroy();
                        }
                    } catch (error) {
                        console.log(this.videoIns[index], index);
                    }
                    this.videoIns[index] = null;
                    var key = 'videoPlayer' + index;
                    delete this.videoTimes[key];
                    this.playerStateTips[playerStateKeyList[index]] = "停止播放,请点击播放按钮";
                },
                handleFullScreen: function() {
                    var main = this.$refs.videoContent;
                    if (this.isFullScreen) {
                        if (document.exitFullscreen) {
                            document.exitFullscreen()
                        } else if (document.mozCancelFullScreen) {
                            document.mozCancelFullScreen()
                        } else if (document.webkitCancelFullScreen) {
                            document.webkitCancelFullScreen()
                        } else if (document.msExitFullscreen) {
                            document.msExitFullscreen()
                        }
                    } else {
                        if (main.requestFullscreen) {
                            main.requestFullscreen()
                        } else if (main.mozRequestFullScreen) {
                            main.mozRequestFullScreen()
                        } else if (main.webkitRequestFullScreen) {
                            main.webkitRequestFullScreen()
                        } else if (main.msRequestFullscreen) {
                            main.msRequestFullscreen()
                        }
                    }
                    this.isFullScreen = false;
                },
                displayAndHideVideos: function(toOpensIndex) {
                    var wrapper = document.getElementById('videoContent').children;
                    for (var i = 0; i < 16; i++) {
                        var player = this.videoIns[i];
                        if (i < toOpensIndex) {
                            // if(player.paused())
                            // {
                            //     player.play();
                            // }
                            // wrapper[i].style.display = 'block';
                        } else {
                            player && player.pause();
                            // wrapper[i].style.display = 'none';
                        }
                    }
                },
                openAndCloseVideoWindows: function(toOpensIndex) {
                    this.videoNumber = toOpensIndex;
                },
                switchflvPlayer: function(index, url, hasaudio) {
                    try {
                        var flvPlayer = this.videoIns[index];
                        if (flvPlayer != null) {
                            flvPlayer.pause();
                            flvPlayer.unload();
                            flvPlayer.detachMediaElement();
                            flvPlayer.destroy();
                            this.videoIns[index] = null;
                        }
                    } catch (error) {

                    }
                    this.initVideo(index, url, hasaudio);
                },
                initVideo: function(index, url, hasaudio) {

                    var flvPlayer = flvjs.createPlayer({
                        type: 'flv',
                        url: url,
                        isLive: true,
                        hasAudio: hasaudio === 1,
                        hasVideo: true,
                        withCredentials: false,
                        // url: 'http://video.gps51.com:81/live/teststream.flv'
                    }, {
                        enableWorker: false,
                        enableStashBuffer: false,
                        isLive: true,
                        lazyLoad: false
                    });
                    var player = document.getElementById('videoElement' + index),
                        me = this;
                    flvPlayer.attachMediaElement(player);
                    flvPlayer.load(); //加载
                    flvPlayer.play();

                    this.videoIns[index] = flvPlayer;
                    var key = 'videoPlayer' + index;
                    this.videoTimes[key] = Date.now();
                    flvPlayer.on(flvjs.Events.STATISTICS_INFO, function(e) {
                        me.networkSpeed[playerStateKeyList[index]] = parseInt(e.speed * 10) / 10 + 'KB/S';
                    })
                },
                addEventListenerToPlayer: function(player, index) {
                    var me = this,
                        key = playerStateKeyList[index];
                    // player.addEventListener('progress', function() {
                    //     me.playerStateTips[key] = "正在请求数据";
                    // });
                    player.addEventListener('error', function() {
                        isSendAjaxState[playerStateKeyList[index]] = false;
                        me.playerStateTips[key] = "请求数据时遇到错误";
                    });
                    player.addEventListener('play', function() {
                        me.playerStateTips[key] = "开始播放";
                    });
                    player.addEventListener('playing', function() {
                        me.playerStateTips[key] = "正在播放";
                        isSendAjaxState[playerStateKeyList[index]] = false;
                    });
                    player.addEventListener('pause', function() {
                        me.playerStateTips[key] = "暂停"
                    });
                    player.addEventListener('waiting', function() {
                        me.playerStateTips[key] = "等待数据"
                    });


                },
                queryVideosPlayUrl: function(callback) {
                    var url = myUrls.queryVideosPlayUrl(),
                        me = this;
                    utils.sendAjax(url, {
                        deviceid: deviceid,
                        playtype: ishttps ? 'flvs' : 'flv',
                    }, function(data) {
                        if (data.status === 0) {
                            me.allPlayUrls = data.records;
                            // me.allPlayUrls.forEach(function(item, index) {
                            //     me.initVideo(index + 1, item.playurl, item.hasaudio);
                            // })
                            callback ? callback(data) : null;
                        } else if (data.status === 3) {

                        }
                    });
                },
                stopVideoPlayer: function() {
                    var videoIns = this.videoIns;
                    for (var i in videoIns) {
                        var key = 'videoPlayer' + i;
                        var nowTime = Date.now();
                        var oldTime = this.videoTimes[key];
                        if (oldTime) {
                            if ((nowTime - oldTime) > 1000 * 60 * 3) {
                                try {
                                    var player = videoIns[i];
                                    if (player) {
                                        player.pause();
                                        player.unload();
                                        player.detachMediaElement();
                                        player.destroy();
                                        videoIns[i] = null;
                                    }
                                } catch (error) {

                                }

                                this.playerStateTips[playerStateKeyList[i]] = '3分钟播放时间到,已关闭';
                                this.videoTimes[key] = undefined;
                                this.playerState[playerStateKeyList[i]] = false;
                                isSendAjaxState[playerStateKeyList[i]] = false;
                            }
                        }
                    }
                },
                setSpeechTimer: function() {
                    var index = [9, 8, 7, 6, 5, 4, 3, 2, 1, 2, 3, 4, 5, 6, 7, 8, 9];
                    var num = index.length,
                        that = this;
                    this.speechTimer = setInterval(function() {
                        setTimeout(function() {
                            num++;
                            that.imgSrc = "./images/luyin/ic_record_ripple@2x-" + index[num] + ".png";
                        }, 70);
                        if (num >= index.length - 1) {
                            num = 0;
                        }
                    }, 70);
                },
                checkVideoPlayerTime: function() {
                    var me = this;
                    this.myInterval = setInterval(function() {
                        me.stopVideoPlayer();
                        if (audioPlayerTime !== 0) {
                            if ((Date.now() - audioPlayerTime) > 1000 * 60 * 3) {
                                audioPlayer.pause();
                                me.isOpenJianting = false;
                                me.audioPlayerTip = '3分钟播放时间到,已关闭';
                                audioPlayerTime = 0;
                            }
                        }
                    }, 5000);
                },
                queryDeviceById: function() {
                    var url = myUrls.queryDeviceById(),
                        that = this;
                    utils.sendAjax(url, {
                        deviceid: deviceid
                    }, function(data) {
                        if (data.status == 0) {

                            that.videotranstype = data.device.videotranstype + '';
                            that.videostreamtype = data.device.videostreamtype + '';
                            that.audiochannel = data.device.audiochannel;
                        } else {}
                    })
                },
                handleSetPlayParamter: function() {
                    var url = myUrls.setVideoPlayParameters(),
                        that = this;
                    if (!(typeof Number(this.audiochannel) === 'number' && !isNaN(this.audiochannel))) {
                        that.$Message.error('通道号必须是1到99的数字')
                        return;
                    }

                    var data = {
                        deviceid: deviceid,
                        audiochannel: Number(this.audiochannel),
                        videotranstype: Number(this.videotranstype),
                        videostreamtype: Number(this.videostreamtype),
                        historyaudiocodec: Number(this.historyaudiocodec),
                        needuploadfilename: this.needuploadfilename ? 1 : 0,
                        videotimestamptype: Number(this.videotimestamptype),
                        videochannelcount: this.videochannelcount,
                        channelinfos: []
                    }

                    if (this.videochannelcount == 1) {
                        data.channelinfos.push({
                            physicalchannel: 1,
                            channeltype: Number(this.physicalchannel1)
                        });
                    } else if (this.videochannelcount == 2) {
                        data.channelinfos.push({
                            physicalchannel: 1,
                            channeltype: Number(this.physicalchannel1)
                        });
                        data.channelinfos.push({
                            physicalchannel: 2,
                            channeltype: Number(this.physicalchannel2)
                        });
                    } else if (this.videochannelcount == 3) {
                        data.channelinfos.push({
                            physicalchannel: 1,
                            channeltype: Number(this.physicalchannel1)
                        });
                        data.channelinfos.push({
                            physicalchannel: 2,
                            channeltype: Number(this.physicalchannel2)
                        });
                        data.channelinfos.push({
                            physicalchannel: 3,
                            channeltype: Number(this.physicalchannel3)
                        });
                    } else if (this.videochannelcount == 4) {
                        data.channelinfos.push({
                            physicalchannel: 1,
                            channeltype: Number(this.physicalchannel1)
                        });
                        data.channelinfos.push({
                            physicalchannel: 2,
                            channeltype: Number(this.physicalchannel2)
                        });
                        data.channelinfos.push({
                            physicalchannel: 3,
                            channeltype: Number(this.physicalchannel3)
                        });
                        data.channelinfos.push({
                            physicalchannel: 4,
                            channeltype: Number(this.physicalchannel4)
                        });
                    }

                    utils.sendAjax(url, data, function(data) {

                        if (data.status === 0) {
                            that.$Message.success('设置成功')
                        } else {
                            that.$Message.error('设置失败')
                        }

                    })


                },
                initAudioPlayer: function(url) {
                    if (audioPlayer != null) {
                        audioPlayer.pause();
                        audioPlayer.unload();
                        audioPlayer.detachMediaElement();
                        audioPlayer.destroy();
                        audioPlayer = null;
                    };
                    audioPlayer = flvjs.createPlayer({
                        type: 'flv',
                        url: url,
                        isLive: true,
                        hasAudio: true,
                        hasVideo: false,
                        withCredentials: false,
                    }, {
                        enableWorker: false,
                        enableStashBuffer: false,
                        isLive: true,
                        lazyLoad: false
                    });
                    var player = document.getElementById('audio-player');
                    audioPlayer.attachMediaElement(player);
                    audioPlayer.load(); //加载
                    audioPlayer.play();
                },
                querySingleAudioVideoParameters: function() {
                    this.Spin = true;
                    var url = myUrls.querySingleAudioVideoParameters(),
                        me = this;
                    utils.sendAjax(url, {
                        deviceid: deviceid
                    }, function(data) {
                        me.Spin = false;
                        if (data.status === 6) {

                            var audiovideoparameters = data.audiovideoparameters;
                            if (audiovideoparameters != null) {
                                var channelsData = [];
                                audiovideoparameters.forEach(function(item, index) {
                                    var dataInfo = {
                                        channelnum: '通道' + (++index),
                                    };
                                    var videoCheckboxGroup = [];
                                    dataInfo.realtimebitratemode = item.realtimebitratemode + '';
                                    dataInfo.storebitratemode = item.storebitratemode + '';
                                    dataInfo.realtimeresolution = item.realtimeresolution + '';
                                    dataInfo.storeresolution = item.storeresolution + '';
                                    dataInfo.realtimekeyframeinterval = item.realtimekeyframeinterval;
                                    dataInfo.storekeyframeinterval = item.storekeyframeinterval;
                                    dataInfo.realtimeframerate = item.realtimeframerate;
                                    dataInfo.storeframerate = item.storeframerate;
                                    dataInfo.realtimeframebitrate = item.realtimeframebitrate;
                                    dataInfo.storeframebitrate = item.storeframebitrate;

                                    item.carnum ? videoCheckboxGroup.push('carnum') : null;
                                    item.channel ? videoCheckboxGroup.push('channel') : null;
                                    item.dateandtime ? videoCheckboxGroup.push('dateandtime') : null;
                                    item.drivingtime ? videoCheckboxGroup.push('drivingtime') : null;
                                    item.gpsspeed ? videoCheckboxGroup.push('gpsspeed') : null;
                                    item.latlon ? videoCheckboxGroup.push('latlon') : null;
                                    item.recorderspeed ? videoCheckboxGroup.push('recorderspeed') : null;
                                    dataInfo.videoCheckboxGroup = videoCheckboxGroup;
                                    channelsData.push(dataInfo);
                                });
                                me.channelsData = channelsData;
                            }


                        } else {
                            me.$Message.error("查询失败");
                        }
                    });
                },
                setSingleAudioVideoParameters: function(index) {
                    var originalData = this.channelsData[index];
                    var parameters = {};
                    if (
                        originalData.realtimebitratemode &&
                        originalData.storebitratemode &&
                        originalData.realtimeresolution &&
                        originalData.storeresolution &&
                        originalData.realtimekeyframeinterval &&
                        originalData.storekeyframeinterval &&
                        originalData.realtimeframerate &&
                        originalData.realtimeframebitrate &&
                        originalData.storeframebitrate
                    ) {
                        parameters.realtimebitratemode = Number(originalData.realtimebitratemode);
                        parameters.storebitratemode = Number(originalData.storebitratemode);
                        parameters.realtimeresolution = Number(originalData.realtimeresolution);
                        parameters.storeresolution = Number(originalData.storeresolution);
                        parameters.realtimekeyframeinterval = originalData.realtimekeyframeinterval;
                        parameters.storekeyframeinterval = originalData.storekeyframeinterval;
                        parameters.realtimeframerate = originalData.realtimeframerate;
                        parameters.realtimeframebitrate = originalData.realtimeframebitrate;
                        parameters.storeframebitrate = originalData.storeframebitrate;


                        var options = ['dateandtime', 'carnum', 'channel', 'latlon', 'recorderspeed', 'gpsspeed', 'drivingtime'];
                        var videoCheckboxGroup = originalData.videoCheckboxGroup;
                        var url = myUrls.setSingleAudioVideoParameters(),
                            me = this;
                        options.forEach(function(item) {
                                if (videoCheckboxGroup.indexOf(item) != -1) {
                                    parameters[item] = true;
                                } else {
                                    parameters[item] = false;
                                }
                            })
                            // parameters.deviceid = deviceid;
                        parameters.channelnum = ++index;

                        utils.sendAjax(url, {
                            deviceid: deviceid,
                            parameters: [parameters]
                        }, function(data) {
                            var status = data.status;
                            if (status == CMD_SEND_RESULT_UNCONFIRM) {
                                me.$Message.error('发送成功，未收到确认');
                            } else if (status === CMD_SEND_RESULT_PASSWORD_ERROR) {
                                me.$Message.error('密码错误');
                            } else if (status === CMD_SEND_RESULT_OFFLINE_NOT_CACHE) {
                                me.$Message.error("设备离线，未缓存");
                            } else if (status === CMD_SEND_RESULT_OFFLINE_CACHED) {
                                me.$Message.error("设备离线，已缓存");
                            } else if (status === CMD_SEND_RESULT_MODIFY_DEFAULT_PASSWORD) {
                                me.$Message.error("需要修改默认密码");
                            } else if (status === CMD_SEND_RESULT_DETAIL_ERROR) {
                                me.$Message.error("错误:" + resp.cause);
                            } else if (status === CMD_SEND_CONFIRMED) {
                                me.$Message.success("发送成功");
                            } else if (status === CMD_SEND_OVER_RETRY_TIMES) {
                                me.$Message.error("尝试发送3次失败");
                            } else if (status === CMD_SEND_SYNC_TIMEOUT) {
                                me.$Message.error("发送超时");
                            }
                        })
                    }
                }
            },
            computed: {
                videoContentCls: function() {
                    return {
                        'videoContent-1': this.videoNumber === 1,
                        'videoContent-4': this.videoNumber === 4,
                        'videoContent-6': this.videoNumber === 6,
                        'videoContent-8': this.videoNumber === 8,
                        'videoContent-9': this.videoNumber === 9,
                        'videoContent-16': this.videoNumber === 16,
                    }
                },
                userType: function() {
                    return Number(localStorage.getItem('userType'));
                }
            },
            watch: {
                brightness: function() {
                    this.sendPaneColorControl(this);
                },
                constract: function() {
                    this.sendPaneColorControl(this);
                },
                hue: function() {
                    this.sendPaneColorControl(this);
                },
                saturate: function() {
                    this.sendPaneColorControl(this);
                },
                exposure: function() {
                    this.sendPaneColorControl(this);
                }
            },
            mounted: function() {
                var that = this;
                this.$nextTick(function() {

                    that.devInfo = '设备序号:' + deviceid + ' 设备名称:' + devName;

                    that.checkVideoPlayerTime();

                    that.queryVideosPlayUrl(function(data) {
                        for (var i = 1; i < 17; i++) {
                            var player = document.getElementById('videoElement' + i);
                            that.addEventListenerToPlayer(player, i)
                        }
                    });

                    that.queryDeviceById();

                    utils.sendAjax(myUrls.queryVideoPlayParameters(), {
                        deviceid: deviceid
                    }, function(respData) {
                        if (respData.status == 0) {
                            that.historyaudiocodec = String(respData.historyaudiocodec);
                            that.needuploadfilename = respData.needuploadfilename == 1 ? true : false;
                            that.videotimestamptype = String(respData.videotimestamptype);
                            that.videochannelcount = Number(respData.videochannelcount);
                            var channelinfos = respData.channelinfos;
                            channelinfos.forEach(function(item) {
                                if (item.physicalchannel == 1) {
                                    that.physicalchannel1 = String(item.channeltype);
                                } else if (item.physicalchannel == 2) {
                                    that.physicalchannel2 = String(item.channeltype);
                                } else if (item.physicalchannel == 3) {
                                    that.physicalchannel3 = String(item.channeltype);
                                } else if (item.physicalchannel == 4) {
                                    that.physicalchannel4 = String(item.channeltype);
                                }
                            });
                        }
                    });

                    setTimeout(function() {
                        document.getElementById('mask-wrapper').style.display = 'none';
                    }, 1000);
                });

            },
        })
    </script>
</body>

</html>